import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { VideoPresetWrapper } from './styled'
import { VideoState } from './VideoState'
import { defaultRenderControls, defaultRenderVideo } from './renderProps'
import { VideoPresetProps } from './typings'

@observer
class Video extends React.Component<VideoPresetProps> {
  static defaultProps = {
    preload: 'none',
    renderVideo: defaultRenderVideo,
    renderControls: defaultRenderControls,
  }
  observableState = this.props.state || new VideoState(this.props)

  componentWillUnmount() {
    console.debug('[Video] componentWillUnmount')
    this.observableState.setIsPlaying(false)
  }

  render() {
    console.debug('[Video] render preset')

    const {
      className,
      renderVideo,
      renderControls,
      state,
      ...remainingProps
    } = this.props

    const handlePlayPause = this.observableState.toggleIsPlaying

    // onPause={event => {}}
    // onPlay={event => {}}
    // onClick={event => {}}
    // onPlaying={event => {}}
    // onVolumeChange={event => {}}
    // onSeeked={event => {}}
    // onLoad={event => {}}
    const isPaused =
      this.observableState.hasBeenPlayedAtLeastOnce === false
        ? undefined
        : this.observableState.isPlaying === false
    const videoProps = {
      ...remainingProps,
      // this.observableState.hasEverBeenPlayed
      controls: this.observableState.controls,
      autoPlay: this.observableState.autoPlay,

      isPaused,
    }

    return (
      <VideoPresetWrapper
        isPlaying={this.observableState.isPlaying}
        className={className}
        onClick={handlePlayPause}
      >
        {renderVideo(videoProps, this.observableState)}
        {renderControls(remainingProps, this.observableState)}
      </VideoPresetWrapper>
    )
  }
}

export { Video }
export default Video