import React, { Component } from 'react'
import { connect } from 'react-redux'
import { TransitionGroup, CSSTransition } from 'react-transition-group'

import actions from 'app/actions'
import { floatInRange, floatLT } from 'app/utils'

import { fullscreenComponents } from './components.fullscreen'

class PlayerFullscreen extends Component {
  state = {
    elements: [],
  }

  componentDidMount() {
    this.setCurrentElements()
  }

  componentDidUpdate(prevProps) {
    const playTimeChanged = this.props.audio.play_ts !== prevProps.audio.play_ts
    const seekTimeChanged = this.props.audio.seek_ts !== prevProps.audio.seek_ts
    if (!playTimeChanged && !seekTimeChanged) return
    this.setCurrentElements()
  }

  setCurrentElements() {
    const { audio, timeline, currentSection, media } = this.props
    const { play_ts, seek_ts } = audio
    // get elements at this play position
    let elements = timeline.filter(element => (
      floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
    ))

    // if the audio is paused, and the first el is a curtain, remove it
    if (elements.length && !audio.playing && elements[0].type === 'curtain') {
      elements.shift()
    }
    if (elements.length > 1) {
      elements = elements.map((e, i) => [(e.type === 'curtain' ? i + 100 : i), e])
        .sort((a,b) => a[0] - b[0])
        .map(p => p[1])
    }

    // if the seek time matches any element, we wanna show that element immediately.
    // additionally, if we were still inside another earlier element, dont show it at all
    // did we recently seek to an element?
    const seekedElements = elements.filter(e => e.start_ts <= seek_ts)
    // if we did, then we want to use the filtered elements i.e. dont show earlier nodes
    // also any elements starting at this point should transition immediately,
    // to prevent flash of the underlying content.
    if (seekedElements.length) {
      elements = seekedElements.map(e => {
        if (e.start_ts === seek_ts && e.type !== 'curtain') {
          return {
            ...e,
            fadeInDuration: 0,
          }
        }
        return e
      })
    }
    // console.log(elements)
    // set nav style from top-most element
    if (elements.length) {
      const lastElement = elements[elements.length - 1]
      if (lastElement.color && lastElement.color.textColor === '#ffffff') {
        actions.viewer.setNavStyle('black')
      } else {
        actions.viewer.setNavStyle('white')
      }
      if (lastElement.type === 'video') {
        const item = media.lookup[lastElement.settings.media_id]
        actions.viewer.setMediaTitle(item.title)
      } else {
        actions.viewer.setMediaTitle(null)
      }
    } else {
      actions.viewer.setNavStyle(currentSection.color)
      actions.viewer.setMediaTitle(null)
    }
    // elements.reverse()
    this.setState({ elements })
  }

  render() {
    const { audio, media } = this.props
    const { play_ts } = audio
    const { elements } = this.state
    const className = elements.length ? "viewer-fullscreen active" : "viewer-fullscreen"
    // console.log(elements, play_ts)
    return (
      <div className={className}>
        <TransitionGroup>
          {elements.map(element => {
            if (!(element.type in fullscreenComponents)) {
              return null
            }
            let {
              type, index,
              fadeInDuration, fadeOutDuration,
              start_ts, end_ts,
              fade_in_end_ts, fade_out_start_ts,
            } = element
            const isEntering = floatInRange(start_ts, play_ts, fade_in_end_ts)
            const isLeaving = floatInRange(fade_out_start_ts, play_ts, end_ts)
            const FullscreenComponent = fullscreenComponents[type]
            fadeInDuration *= 1000
            fadeOutDuration *= 1000
            if (!isEntering && !isLeaving) {
              fadeInDuration = 0
              fadeOutDuration = 0
            }
            const transitionDuration = (isEntering ? fadeInDuration : fadeOutDuration) + 'ms'
            // console.log(play_ts, isEntering, isLeaving, fadeInDuration, fadeOutDuration)
            return (
              <CSSTransition
                key={index}
                classNames="fade"
                timeout={{
                  enter: fadeInDuration,
                  exit: fadeOutDuration,
                }}
                component={FirstChild}
              >
                <FullscreenComponent
                  element={element}
                  media={media}
                  transitionDuration={transitionDuration}
                />
              </CSSTransition>
            )
          })}
        </TransitionGroup>
      </div>
    )
  }
}

const FirstChild = (props) => {
  const childrenArray = React.Children.toArray(props.children);
  return childrenArray[0] || null;
}

const mapStateToProps = state => ({
  currentSection: state.viewer.currentSection,
  audio: state.audio,
  media: state.media.index,
  timeline: state.viewer.currentSection ? state.viewer.currentSection.fullscreenTimeline : [],
})

export default connect(mapStateToProps)(PlayerFullscreen)