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

@observer
class Video extends React.Component<VideoPresetProps> {
  // props
  static defaultProps = {
    src: [''],
    title: 'Video Title',
    slogan: 'Video Description Line 1',
    shareTitle: 'Share',
    videoLength: '00:00',
    shouldShowVideoInformation: true,
    hasPlayButton: true,
    renderVideo: defaultRenderVideo,
    renderControls: defaultRenderControls,
  }

  // registering state
  observableState = this.props.state || new VideoState(this.props)

  componentWillMount() {
    this.observableState.setIsPlaying(this.props.shouldAutoPlay)
  }

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

    // getting the toggle play function from observable
    const handlePlayPause = this.observableState.toggleIsPlaying

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

export { Video }
export default Video