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) {
    if (this.props.audio.play_ts === prevProps.audio.play_ts) return
    this.setCurrentElements()
  }

  setCurrentElements() {
    const { audio, timeline } = this.props
    const { play_ts } = audio
    const elements = timeline.filter(element => (
      floatInRange(element.start_ts, play_ts, element.fade_out_start_ts + 0.1)
    ))
    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
            }
            const isEntering = floatInRange(element.start_ts, play_ts, element.fade_in_end_ts)
            const FullscreenComponent = fullscreenComponents[element.type]
            const transitionDuration = (isEntering ? (1000 * element.fadeInDuration) : (1000 * element.fadeOutDuration)) + 'ms'
            return (
              <CSSTransition
                key={element.index}
                classNames="fade"
                timeout={{
                  enter: element.fadeInDuration * 1000,
                  exit: element.fadeOutDuration * 1000,
                }}
                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 => ({
  audio: state.audio,
  media: state.media.index,
  timeline: state.viewer.fullscreenTimeline,
})

export default connect(mapStateToProps)(PlayerFullscreen)