import React, { Component } from 'react'

import { generateTransform, generateVideoStyle, pickCursor } from 'app/views/tile/tile.utils'
import { timestampToSeconds } from 'app/utils'

export default class TileVideo extends Component {
  state = {
    ready: false,
  }

  constructor(props) {
    super(props)
    this.videoRef = React.createRef()
    this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
    this.handleEnded = this.handleEnded.bind(this)
  }
  
  componentDidMount() {
    this.bind()
    setTimeout(() => {
      this.setState({ ready: true })
    }, 1)
  }

  componentDidUpdate() {
    this.unbind()
    this.bind()
  }

  componentWillUnmount() {
    this.unbind()
  }

  bind() {
    if (!this.videoRef.current) return
    this.el = this.videoRef.current
    this.el.addEventListener('ended', this.handleEnded)
    this.el.addEventListener('timeupdate', this.handleTimeUpdate)
    const muted = this.props.viewing
      ? this.props.tile.settings.muted
      : true
    const volume = muted
      ? 0.0
      : ('volume' in this.props.tile.settings)
        ? this.props.tile.settings.volume
        : 1.0
    this.el.volume = volume
  }

  unbind() {
    if (!this.el) return
    this.el.removeEventListener('timeupdate', this.handleTimeUpdate)
    this.el.removeEventListener('ended', this.handleEnded)
  }

  handleTimeUpdate() {
    if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
      const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0
      const loop_end = timestampToSeconds(this.props.tile.settings.loop_end) || this.videoRef.current.duration
      if (this.videoRef.current.currentTime > loop_end) {
        this.videoRef.current.currentTime = loop_start
      }
    }
  }

  handleEnded() {
    this.props.onPlaybackEnded(this.props.tile)
    if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
      const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0
      this.videoRef.current.currentTime = loop_start
    }
  }

  render() {
    let { tile, box, bounds, audio, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter, onMouseLeave } = this.props

    if (!tile.settings.url) {
      return null
    }

    // console.log(tile)
    const style = {
      transform: generateTransform(tile, box, bounds, videoBounds),
      opacity: !this.state.ready ? 0 : tile.settings.opacity,
      transition: "opacity 0.2s",
    }

    let className = ['tile', tile.type].join(' ')

    let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
    if (cursorClass) {
      className += " " + cursorClass
    }
    if (cursorStyle) {
      style.cursor = cursorStyle
    }

    // console.log(tile.settings)
    className += ' ' + tile.settings.align
    const muted = viewing
      ? (tile.settings.muted || audio.muted)
      : true
    return (
      <div
        className={className}
        onMouseDown={onMouseDown}
        onDoubleClick={onDoubleClick}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        style={style}
      >
        <video
          ref={this.videoRef}
          src={tile.settings.url}
          autoPlay={true}
          controls={false}
          disablePictureInPicture={true}
          loop={tile.settings.loop}
          muted={muted}
          style={generateVideoStyle(tile, bounds)}
        />
      </div>
    )
  }
}