import React, { Component } from 'react'

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

export default class TileVideo extends Component {
  constructor(props) {
    super(props)
    this.videoRef = React.createRef()
    this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
    this.handleEnded = this.handleEnded.bind(this)
  }
  
  componentDidMount() {
    this.bind()
  }

  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)
  }

  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, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
    // console.log(tile)
    const style = {
      transform: generateTransform(tile, box, videoBounds),
      opacity: tile.settings.opacity,
    }
    let className = ['tile', tile.type].join(' ')
    if (tile.target_page_id || (viewing && tile.href)) {
      className += ' ' + (tile.settings.cursor || 'hand_up')
    }
    // console.log(tile.settings)
    if (!tile.settings.url) {
      return null
    }
    className += ' ' + tile.settings.align
    return (
      <div
        className={className}
        onMouseDown={onMouseDown}
        onDoubleClick={onDoubleClick}
        style={style}
      >
        <video
          ref={this.videoRef}
          src={tile.settings.url}
          autoPlay={true}
          controls={false}
          loop={tile.settings.loop}
          muted={viewing ? tile.settings.muted : true}
          style={generateVideoStyle(tile, bounds)}
        />
      </div>
    )
  }
}