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

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

export const loadSections = () => dispatch => {
  let sections = []
  let currentSection
  let mediaIndex = 0
  let mediaLabels = {}
  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') {
      if (currentSection) {
        currentSection.mediaLabels = Object.keys(mediaLabels).join(', ')
        mediaLabels = {}
      }
      currentSection = newSection(annotation, sections.length, mediaIndex)
      sections.push(currentSection)
    }
    if (MEDIA_TYPES.has(annotation.type)) {
      if (currentSection) {
        const media = mediaLookup[annotation.settings.media_id]
        currentSection.media.push({
          start_ts: annotation.start_ts,
          media
        })
        if (media.type in MEDIA_LABEL_TYPES) {
          mediaLabels[MEDIA_LABEL_TYPES[media.type]] = true
        }
        mediaIndex += 1
      } else {
        console.error("media found before first section")
      }
    }
  })

  if (currentSection && Object.keys(mediaLabels).length) {
    currentSection.mediaLabels = Object.keys(mediaLabels).join(', ')
  }

  // 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] })
}