shoptime/com.twin.app.shoptime/src/reducers/videoOverlayReducer.js

// Video Overlay Reducer - modal=true 상태에서 비디오 오버레이 제어
import { VIDEO_OVERLAY_ACTIONS } from '../actions/videoOverlayActions';
import { createDebugHelpers } from '../utils/debug';

// 디버그 헬퍼 설정
const DEBUG_MODE = false;
const { dlog, dwarn, derror } = createDebugHelpers(DEBUG_MODE);

export const initialState = {
  // Modal 상태
  modal: true, // true(modal), false(fullscreen)

  // Overlay Controls 상태
  controls: {
    visible: false, // controls 표시 여부
    sliderVisible: false, // 슬라이더 표시 여부
    titleVisible: true, // 제목 표시 여부
    feedbackVisible: false, // 피드백 표시 여부
  },

  // AutoClose 타이머 제어
  autoClose: {
    enabled: true, // autoClose 활성화 여부
    timeout: 3000, // 타임아웃 시간 (ms)
    remainingTime: 0, // 남은 시간 (ms)
    active: false, // 타이머 실행 중 여부
  },

  // 비디오 정보
  videoInfo: {
    url: '',
    title: '',
    thumbnailUrl: '',
    isYoutube: false,
  },

  // 상태 변경 기록 (디버깅용)
  timestamp: null,
  lastAction: null,
};

/**
 * Reducer handlers 맵
 */
const handlers = {
  [VIDEO_OVERLAY_ACTIONS.SWITCH_TO_MODAL]: (state, action) => ({
    ...state,
    modal: true,
    autoClose: {
      ...state.autoClose,
      active: false, // 모달 전환 시 타이머 중지
    },
    timestamp: action.payload.timestamp,
    lastAction: VIDEO_OVERLAY_ACTIONS.SWITCH_TO_MODAL,
  }),

  [VIDEO_OVERLAY_ACTIONS.SWITCH_TO_FULLSCREEN]: (state, action) => ({
    ...state,
    modal: false,
    autoClose: {
      ...state.autoClose,
      active: false, // 전체화면 전환 시 타이머 중지
    },
    timestamp: action.payload.timestamp,
    lastAction: VIDEO_OVERLAY_ACTIONS.SWITCH_TO_FULLSCREEN,
  }),

  [VIDEO_OVERLAY_ACTIONS.SHOW_CONTROLS]: (state, action) => ({
    ...state,
    controls: {
      ...state.controls,
      visible: true,
      sliderVisible: true,
      titleVisible: true,
    },
    autoClose: {
      ...state.autoClose,
      active: true, // Controls 표시 시 autoClose 시작
    },
    timestamp: action.payload.timestamp,
    lastAction: VIDEO_OVERLAY_ACTIONS.SHOW_CONTROLS,
  }),

  [VIDEO_OVERLAY_ACTIONS.HIDE_CONTROLS]: (state, action) => ({
    ...state,
    controls: {
      ...state.controls,
      visible: false,
      sliderVisible: false,
      feedbackVisible: false,
    },
    autoClose: {
      ...state.autoClose,
      active: false, // Controls 숨김 시 autoClose 중지
      remainingTime: 0,
    },
    timestamp: action.payload.timestamp,
    lastAction: VIDEO_OVERLAY_ACTIONS.HIDE_CONTROLS,
  }),

  [VIDEO_OVERLAY_ACTIONS.TOGGLE_CONTROLS]: (state, action) => {
    const isCurrentlyVisible = state.controls.visible;
    const newState = {
      ...state,
      controls: {
        ...state.controls,
        visible: !isCurrentlyVisible,
        sliderVisible: !isCurrentlyVisible,
        titleVisible: !isCurrentlyVisible || state.controls.titleVisible,
      },
      autoClose: {
        ...state.autoClose,
        active: !isCurrentlyVisible, // 표시 상태로 토글되면 autoClose 시작
      },
      timestamp: action.payload.timestamp,
      lastAction: VIDEO_OVERLAY_ACTIONS.TOGGLE_CONTROLS,
    };

    dlog('🔄 [videoOverlayReducer.TOGGLE_CONTROLS] 상태 변화');
    dlog('🔄 [videoOverlayReducer.TOGGLE_CONTROLS] 이전 visible:', isCurrentlyVisible);
    dlog('🔄 [videoOverlayReducer.TOGGLE_CONTROLS] 이후 visible:', newState.controls.visible);
    dlog('🔄 [videoOverlayReducer.TOGGLE_CONTROLS] 전체 상태:', newState);

    return newState;
  },

  [VIDEO_OVERLAY_ACTIONS.START_AUTO_CLOSE]: (state, action) => ({
    ...state,
    autoClose: {
      enabled: true,
      timeout: action.payload.timeout || state.autoClose.timeout,
      remainingTime: action.payload.timeout || state.autoClose.timeout,
      active: true,
    },
    timestamp: action.payload.timestamp,
    lastAction: VIDEO_OVERLAY_ACTIONS.START_AUTO_CLOSE,
  }),

  [VIDEO_OVERLAY_ACTIONS.STOP_AUTO_CLOSE]: (state, action) => ({
    ...state,
    autoClose: {
      ...state.autoClose,
      active: false,
      remainingTime: 0,
    },
    timestamp: action.payload.timestamp,
    lastAction: VIDEO_OVERLAY_ACTIONS.STOP_AUTO_CLOSE,
  }),

  [VIDEO_OVERLAY_ACTIONS.RESET_AUTO_CLOSE]: (state, action) => ({
    ...state,
    autoClose: {
      ...state.autoClose,
      remainingTime: state.autoClose.timeout,
      active: true,
    },
    timestamp: action.payload.timestamp,
    lastAction: VIDEO_OVERLAY_ACTIONS.RESET_AUTO_CLOSE,
  }),

  [VIDEO_OVERLAY_ACTIONS.UPDATE_AUTO_CLOSE_TIMEOUT]: (state, action) => ({
    ...state,
    autoClose: {
      ...state.autoClose,
      timeout: action.payload.timeout,
      remainingTime: action.payload.timeout,
    },
    timestamp: action.payload.timestamp,
    lastAction: VIDEO_OVERLAY_ACTIONS.UPDATE_AUTO_CLOSE_TIMEOUT,
  }),

  [VIDEO_OVERLAY_ACTIONS.SET_OVERLAY_VISIBILITY]: (state, action) => ({
    ...state,
    controls: {
      ...state.controls,
      ...action.payload,
    },
    timestamp: action.payload.timestamp,
    lastAction: VIDEO_OVERLAY_ACTIONS.SET_OVERLAY_VISIBILITY,
  }),
};

/**
 * Main Reducer
 * @param {Object} state - 현재 상태
 * @param {Object} action - Redux action
 * @returns {Object} 다음 상태
 */
export const videoOverlayReducer = (state = initialState, action = {}) => {
  const handler = handlers[action.type];

  if (handler) {
    return handler(state, action);
  }

  return state;
};