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

// Media Overlay Reducer - 3 Layer 구조(MediaPanel + MediaPlayer)용 overlay 상태 관리
import { MEDIA_OVERLAY_ACTIONS } from '../actions/mediaOverlayActions';
import { createDebugHelpers } from '../utils/debug';

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

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

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

  // 미디어 정보
  mediaInfo: {
    url: '',
    title: '',
    thumbnailUrl: '',
    isYoutube: false,
  },

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

/**
 * Reducer handlers 맵
 */
const handlers = {
  [MEDIA_OVERLAY_ACTIONS.SET_MEDIA_CONTROLS_SHOW]: (state, action) => ({
    ...state,
    controls: {
      ...state.controls,
      visible: true,
      sliderVisible: true,
      titleVisible: true,
    },
    autoClose: {
      ...state.autoClose,
      active: true, // Controls 표시 시 autoClose 시작
    },
    timestamp: action.payload.timestamp,
    lastAction: MEDIA_OVERLAY_ACTIONS.SET_MEDIA_CONTROLS_SHOW,
  }),

  [MEDIA_OVERLAY_ACTIONS.SET_MEDIA_CONTROLS_HIDE]: (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: MEDIA_OVERLAY_ACTIONS.SET_MEDIA_CONTROLS_HIDE,
  }),

  [MEDIA_OVERLAY_ACTIONS.SET_MEDIA_CONTROLS_TOGGLE]: (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: MEDIA_OVERLAY_ACTIONS.SET_MEDIA_CONTROLS_TOGGLE,
    };

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

    return newState;
  },

  [MEDIA_OVERLAY_ACTIONS.START_MEDIA_AUTO_CLOSE]: (state, action) => ({
    ...state,
    autoClose: {
      ...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: MEDIA_OVERLAY_ACTIONS.START_MEDIA_AUTO_CLOSE,
  }),

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

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

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

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

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

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

  return state;
};