import React from 'react'
import { EMPTY_OBJ } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { VideoPlayer } from 'atoms/Video'
import QuestionButtonIcon from 'icons/QuestionIcon'
import PlayButtonIcon from 'icons/PlayIcon'
import { wording } from 'words'
import {
  VideoTitle,
  VideoSlogan,
  VideoWidgetLogo,
  VideoShareWrap,
  VideoShareText,
  VideoTimerWrap,
  VideoTimerText,
  PlayButton,
  VideoLogoPanel,
} from './styled'
import { VideoPresetControlProps } from './typings'

/**
 * @todo !!! NEEDS A PAUSE ICON, OR MORPH THE PLAY ICON INTO PAUSE
 * @todo later - this is the actual controls, the other is VideoFlare
 */
class ActualVideoControls extends React.PureComponent<VideoPresetControlProps> {
  render() {
    const { state } = this.props
    const handleClick = state.toggleIsPlaying
    const icon = <PlayButtonIcon type="large" />
    console.debug('[Video] ActualVideoControls: render')

    return (
      <React.Fragment>
        <PlayButton children={icon} onClick={handleClick} aria-label={wording.playButton} />
      </React.Fragment>
    )
  }
}

@observer
class VideoControls extends React.Component<VideoPresetControlProps> {
  static defaultProps = {
    state: EMPTY_OBJ,
  }
  render() {
    const { state, title, slogan, shareTitle, videoLength } = this.props
    console.debug('[Video] controls: render')

    // this 1 line is the one that will change when the state changes
    return state.isPlaying ? '' : (
      <React.Fragment>
        <VideoLogoPanel>
          <VideoWidgetLogo />
          <VideoTitle>{title}</VideoTitle>
          <VideoSlogan>{slogan}</VideoSlogan>
        </VideoLogoPanel>
        <VideoShareWrap>
          <VideoShareText>{shareTitle}</VideoShareText>
          <QuestionButtonIcon />
        </VideoShareWrap>
        <ActualVideoControls state={state} />
        <VideoTimerWrap>
          <PlayButtonIcon type="small" />
          <VideoTimerText>{videoLength}</VideoTimerText>
        </VideoTimerWrap>

        {/* @todo these have some actions... */}
        {/* <QuestionButtonIcon /> */}
      </React.Fragment>
    )
  }
}

export { VideoControls }
export default VideoControls