import React from 'react'
import { toArray } from 'exotic'
import { StyledVideo } from './styled'
import { alias } from './deps'
import { Source } from './Source'
import { SourceType, AliasedVideoTypes, VideoTypes as VideoProps } from './typings'

interface VideoRef extends React.RefObject<HTMLVideoElement> {
  current: HTMLVideoElement
  value?: HTMLVideoElement
}

// @todo @vishalini
// 1. use exotic (isObj, isFunction)
// 2. move to deps
function fromRefToDom(dom: VideoRef): HTMLVideoElement {
  return dom.current && dom.current.play
    ? dom.current
    : dom.value && dom.value.play
      ? dom.value
      : dom
}

/**
 * @type { HTMLMediaElement }
 * @todo - merge with OneGallery/VideoPlayer - this one does not embedded url/youtube
 * https://www.youtube.com/watch?v=r21CMDyPuGo
 * @todo - allow borderless iframe inserting
 * @example <iframe data-reactid="26" frameborder="0" allowfullscreen="1" gesture="media" allow="encrypted-media" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/51SmzJzu-PI?autoplay=0&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;iv_load_policy=3&amp;controls=0&amp;start=0&amp;origin=http%3A%2F%2Ftruthdubstep.audio&amp;enablejsapi=1&amp;widgetid=1" id="widget2"></iframe>
 */
class VideoPlayer extends React.PureComponent<VideoProps> {
  dom: VideoRef = React.createRef()

  static defaultProps = {
    autoPlay: false,
    muted: undefined,
    loop: true,
    controls: false,
    isPaused: undefined,
    src: ['//raderain-cdn.sirv.com/T-Giant/Video/Video_T-Giant_Skateboadring.mp4'],
    preload: 'auto',
    className: 'video-inline-player',
  }

  updateRef() {
    const dom = fromRefToDom(this.dom)

    // !isFunction @todo @vishalini
    if (!dom.pause) {
      console.warn('NOT A VIDEO REF')
      console.log(this)
    } else if (this.props.isPaused === true) {
      console.debug('[Video] pausing')
      dom.pause()
    } else if (this.props.isPaused === false) {
      console.debug('[Video] playing')
      dom.play()
    }
  }

  // try this https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
  static getDerivedStateFromProps(nextProps: VideoProps) {
    return {
      isForcingPlayPause: nextProps.isPaused !== undefined,
      isPlaying: nextProps.isPaused === false,
    }
  }

  componentDidUpdate() {
    console.debug('[Video] componentDidUpdate')
    this.updateRef()
  }

  render() {
    const {
      loop,
      controls,
      preload,
      src,
      muted,
      //
      className,
      ...remainingProps
    } = this.props

    const list = toArray(src)
    const [firstSource] = list

    const thumbnailImage = alias.toCover(this.props)
    const autoPlay = alias.toAutoPlay(this.props)
    const listView = list.map(Source.from)

    return (
      <video
        // onPause={event => {}}
        // onPlay={event => {}}
        // onClick={event => {}}
        // onPlaying={event => {}}
        // onVolumeChange={event => {}}
        // onSeeked={event => {}}
        // onLoad={event => {}}

        // this is styled components
        // @see https://github.com/styled-components/styled-components/blob/master/docs/tips-and-tricks.md
        // innerRef={this.setRef}
        //
        // this is for normal unwrapped react elements
        // @see https://reactjs.org/docs/refs-and-the-dom.html
        // @see https://github.com/facebook/react/pull/11555
        // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
        ref={this.dom}
        className={className}
        poster={thumbnailImage}
        // autoPlay={autoPlay}
        loop={loop}
        preload={preload}
        controls={controls}
        muted={muted}
        src={firstSource}
        {...remainingProps}
      >
        {listView}
      </video>
    )
  }
}

export { VideoPlayer }
export default VideoPlayer