import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Route, Link } from 'react-router-dom'

import { Loading, FileList, FileViewer } from '../../../common'

import actions from '../../../actions'

const initialState = {
  dir: '/',
  frameA: null,
  frameB: null,
  selection: null,
  loading: true
}

/*
  when the sequence editor loads,
    reset the selection
    reset the two frames
    set the two frames to the beginning and end of the video
  when mousing over the video
    ideally you would see a tiny thumbnail preview of the frame :)
    - click to start a selection, drag over, mouseup to end the selection
  this should update the start/end frame
  ...
  so there are two things you could do with this
  1) create an entirely new dataset
  2) add frames to an existing dataset
  ...
  method 1)
  - requires minimal setup, just a server script which..
     - creates the new sequence folder
     - symlinks the frames
     - runs build_dataset
     - create appropriate file object, using parent dataset's folder_id
     - enqueue initial training
       ---> we can then train on basic subsets, with more control, like we do already...
     - tell parent dataset thing the new sequence name
  ...
  method 2)
  - requires sequence editor to be aware of its own dataset
  - requires sequence editor to know whether a sequence is original or not
*/

class SequenceEditor extends Component {
  state = { ...initialState }

  constructor() {
    super()
    this.handleMouseDown = this.handleMouseDown.bind(this)
    this.handleMouseMove = this.handleMouseMove.bind(this)
    this.handleMouseEnter = this.handleMouseEnter.bind(this)
    this.handleMouseLeave = this.handleMouseLeave.bind(this)
    this.handleMouseUp = this.handleMouseUp.bind(this)
  }

  componentDidMount() {
    const { checkpoint } = this.props
    window.addEventListener('mousemove', this.handleMouseMove)
    window.addEventListener('mouseup', this.handleMouseUp)
    if (checkpoint && checkpoint.sequence) {
      console.log(checkpoint)
      const frameA = checkpoint.sequence[0]
      const frameB = checkpoint.sequence[checkpoint.sequence.length-1]
      this.setState({
        ...initialState,
        frameA,
        frameB,
      })
    }
  }

  componentDidUpdate(prevProps) {
    const { checkpoint } = this.props
    if (checkpoint !== prevProps.checkpoint) {
      console.log(checkpoint)
      const frameA = checkpoint.sequence[0]
      const frameB = checkpoint.sequence[checkpoint.sequence.length-1]
      this.setState({
        ...initialState,
        frameA,
        frameB,
      })
    }
  }

  componentWillUnmount(){
    window.removeEventListener('mouseup', this.handleMouseUp)
    window.removeEventListener('mousemove', this.handleMouseMove)
  }

  handleMouseDown(e) {
    this.setState({ dragging: true })
  }
  handleMouseMove(e) {
  }
  handleMouseEnter(e) {
  }
  handleMouseLeave(e) {
  }
  handleMouseUp(e) {
    this.setState({ dragging: false })
  }

  handlePick(file) {
    console.log(file)
    // this.setState({ dir, file: null, loading: true })
  }

  render() {
    const { app, checkpoint } = this.props
    const {
      loading,
      selection,
      frameA, frameB,
    } = this.state
    // console.log(this.props, this.state)
    const width = 200
    const path = "sequences/" + checkpoint.name
    return (
      <div className='sequenceEditor'>
        <div
          className='timeline'
          style={{ width }}
          mouseDown={this.handleSelectionStart}
          mouseEnter={this.handleMouseEnter}
          mouseLeave={this.handleMouseLeave}
        >
          {selection && <div className='selection' style={selection}></div>}
        </div>
        <FileViewer path={path} file={this.state.frameA} />
        <FileViewer path={path} file={this.state.frameB} />
      </div>
    )
  }
}

const mapStateToProps = state => ({
  app: state.system.app,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: bindActionCreators({}, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(SequenceEditor)