import * as types from 'app/types'
import { GROWL } from 'app/constants'

const navComponents = {
  /* UI components that close if anything else opens */
  share: false,
  subscribe: false,
  footnotes: false,
}

const initialState = {
  /* UI component display state */
  ...navComponents,
  nav: false,
  credits: false,
  checklist: false,
  transcript: false,

  /* section look and navigation */
  sections: { loading: true },
  currentSection: null,
  nextSection: null,
  autoAdvance: false,
  atEndOfSection: false,

  /* footnotes */
  footnoteList: [],
  currentFootnote: -1,

  /* color of the bar / logo / icons */
  navStyle: 'white',

  /* title of media if in fullscreen mode */
  mediaTitle: null,

  /* growl message at top */
  growlOpen: true,
  growlMessage: GROWL.OPENING_MESSAGE,
  growlTranscriptOpen: false,

  /* vitrine */
  vitrineModal: {
    open: false,
    media: null,
    index: null,
  },

  options: {},
}

export default function viewerReducer(state = initialState, action) {
  // console.log(action.type, action)
  switch (action.type) {
    case types.viewer.set_value:
      return {
        ...state,
        [action.key]: action.value,
      }

    case types.viewer.toggle_component:
      return {
        ...state,
        [action.key]: action.value,
      }

    case types.viewer.toggle_nav_component:
      return {
        ...state,
        ...navComponents,
        [action.key]: action.value,
      }

    case types.audio.play:
      return {
        ...state,
        growlOpen: false,
      }

    case types.viewer.open_growl:
      return {
        ...state,
        growlMessage: action.message,
        growlOpen: true,
      }

    case types.viewer.close_growl:
      return {
        ...state,
        growlOpen: false,
      }

    case types.viewer.load_sections:
      return {
        ...state,
        sections: action.sections,
        footnoteList: action.footnoteList,
      }

    case types.viewer.set_current_section:
      return {
        ...state,
        currentSection: action.currentSection,
        nextSection: action.nextSection,
        navStyle: action.currentSection.color,
        atEndOfSection: false,
      }

    case types.viewer.reached_end_of_section:
      return {
        ...state,
        atEndOfSection: true,
      }

    case types.viewer.set_nav_style:
      if (action.color === state.navStyle) {
        return state
      }
      return {
        ...state,
        navStyle: action.color,
      }

    case types.viewer.set_media_title:
      if (action.title === state.mediaTitle) {
        return state
      }
      return {
        ...state,
        mediaTitle: action.title,
      }

    case types.viewer.open_vitrine_modal:
      return {
        ...state,
        vitrineModal: {
          open: true,
          media: action.media,
          index: action.index,
          color: action.color,
        }
      }

    case types.viewer.close_vitrine_modal:
      return {
        ...state,
        vitrineModal: {
          ...state.vitrineModal,
          open: false,
        }
      }

    case types.viewer.set_vitrine_index:
      return {
        ...state,
        vitrineModal: {
          ...state.vitrineModal,
          index: action.index,        
        }
      }

    case types.viewer.open_footnote:
      return {
        ...state,
        currentFootnote: action.footnote_id
      }

    default:
      return state
  }
}