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

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" />
    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')
    const videoControlsView = () => {
      return state.shouldAutoPlay ? (
        <Empty />
      ) : (
        <React.Fragment>
          <VideoLogoPanel>
            <VideoWidgetLogo />
            <VideoTitle>{title}</VideoTitle>
            <VideoSlogan>{slogan}</VideoSlogan>
          </VideoLogoPanel>
          <VideoShareWrap>
            <VideoShareText>{shareTitle}</VideoShareText>
            <LargeWhiteIcon type="share" />
          </VideoShareWrap>
          <ActualVideoControls state={state} />
          <VideoTimerWrap>
            <SmallLiteIcon type="play" />
            <VideoTimerText>{videoLength}</VideoTimerText>
          </VideoTimerWrap>

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

    // this 1 line is the one that will change when the state changes
    return state.isPlaying ? '' : videoControlsView()
  }
}

export { VideoControls }
export default VideoControls