import React from 'react'
import { EMPTY_OBJ } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { Empty } from 'atoms/Empty'
import { styledMaterialIcon } from 'atoms/MaterialIcon'
import { wording } from 'words'
import { VideoPresetControlProps } from './typings'
import {
  VideoTitle,
  VideoSlogan,
  VideoWidgetLogo,
  VideoShareWrap,
  VideoShareText,
  VideoTimerWrap,
  VideoTimerText,
  PlayButton,
  VideoLogoPanel,
} from './styled'

const LargeWhiteIcon = styledMaterialIcon(48, 'white')
const LargeLiteIcon = styledMaterialIcon(48, 'white', 0.7)
const SmallLiteIcon = styledMaterialIcon(24, 'white', 0.7)

/**
 * @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 = <LargeLiteIcon type="play" />
    return <PlayButton children={icon} onClick={handleClick} aria-label={wording.playButton} />
  }
}

@observer
class VideoControls extends React.Component<VideoPresetControlProps> {
  static defaultProps = {
    state: EMPTY_OBJ,
  }
  render() {
    const { state, title, slogan, shareTitle, videoLength } = this.props
    const videoInfoView = () => {
      return state.shouldShowVideoInformation ? (
        <React.Fragment>
          <VideoLogoPanel>
            <VideoWidgetLogo />
            <VideoTitle>{title}</VideoTitle>
            <VideoSlogan>{slogan}</VideoSlogan>
          </VideoLogoPanel>
          <VideoShareWrap>
            <VideoShareText>{shareTitle}</VideoShareText>
            <LargeWhiteIcon type="share" />
          </VideoShareWrap>
          <VideoTimerWrap>
            <SmallLiteIcon type="play" />
            <VideoTimerText>{videoLength}</VideoTimerText>
          </VideoTimerWrap>

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

    const playButtonView = () => {
      return state.hasPlayButton ?
        (<ActualVideoControls state={state} />)
        : <Empty />
    }

    if (state.isPlaying) {
      return <Empty />
    }

    return (
      <React.Fragment>
        {playButtonView()}
        {videoInfoView()}
      </React.Fragment>
    )
  }
}

export { ActualVideoControls, VideoControls }
export default VideoControls