import * as types from 'app/types'
import { store, history, dispatch } from 'app/store'
import { MEDIA_TYPES } from 'app/constants'

const newSection = (annotation, index) => ({
  start_ts: annotation.start_ts,
  title: annotation.text,
  media: [],
  index,
})

export const loadSections = () => dispatch => {
  let sections = [], currentSection
  const state = store.getState()
  const { order: annotationOrder, lookup: annotationLookup } = state.annotation.index
  const { lookup: mediaLookup } = state.media.index

  // loop over the annotations in time order. group the media found in each section.
  annotationOrder.forEach((annotation_id, i) => {
    const annotation = annotationLookup[annotation_id]
    if (annotation.type === 'header') {
      currentSection = newSection(annotation, sections.length)
      sections.push(currentSection)
    }
    if (MEDIA_TYPES.has(annotation.type)) {
      if (!currentSection) {
        console.error("media found before first section")
        return
      }
      const media = mediaLookup[annotation.settings.media_id]
      currentSection.media.push(media)
    }
  })

  // console.log(sections)

  dispatch({ type: types.viewer.load_sections, data: sections })
}

export const showSection = section => dispatch => {
  dispatch({ type: types.viewer.toggle_section, key: section, value: true })
}

export const hideSection = section => dispatch => {
  dispatch({ type: types.viewer.toggle_section, key: section, value: false })
}

export const toggleSection = section => dispatch => {
  dispatch({ type: types.viewer.toggle_section, key: section, value: !store.getState().viewer[section] })
}