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

import util from '../../../util'

import { FileViewer, Timeline, Param, Button } from '../../../common'

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

const initialState = {
  dir: '/',
  cursor: null,
  selection: null,
}

/*
  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.handleCursor = this.handleCursor.bind(this)
    this.handleSelect = this.handleSelect.bind(this)
  }

  componentDidMount() {
    const { checkpoint } = this.props
    if (checkpoint) {
      this.reset()
    }
  }

  componentDidUpdate(prevProps) {
    const { checkpoint } = this.props
    if (checkpoint !== prevProps.checkpoint) {
      this.reset()
    }
  }

  reset(){
    const { checkpoint } = this.props
    if (!(checkpoint && checkpoint.sequence)) return
    console.log(checkpoint)
    this.setState({
      ...initialState,
    })
  }

  handleCursor(cursor) {
    this.setState({ cursor })
  }

  handleSelect(selection) {
    this.setState({ selection })
  }

  render() {
    const { app, checkpoint } = this.props
    const { cursor, selection } = this.state
    const path = "sequences/" + checkpoint.name
    return (
      <div className='sequenceEditor'>
        <Timeline
          sequence={checkpoint.sequence}
          onCursor={this.handleCursor}
          onSelect={this.handleSelect}
        />
        <Frame label='Cursor' path={path} frame={cursor} />
        {selection && selection.start && 
          <Frame label='Selection Start' path={path} frame={selection.start} />
        }
        {selection && selection.end && 
          <Frame label='Selection End' path={path} frame={selection.end} />
        }
        {selection &&
          <div className='form'>
            <Param
              title='Selection length'
            >{selection.end.i - selection.start.i}{' frames'}</Param>
            <Param
              title='Duration'
            >{util.frameTimestamp(selection.end.i - selection.start.i)}</Param>
            <Button
              title='Create a new dataset?'
            >Create</Button>
          </div>
        }
      </div>
    )
  }
}

function Frame ({ label, path, frame }) {
  if (!frame) return <div class='frame'></div>
  return (
    <div class='frame'>
      <FileViewer thumbnail={140} path={path} file={frame.frame} />
      <div class='spaced'>
        <span>{label}</span>
        <span>{'#'}{frame.i} {util.frameTimestamp(frame.i)}</span>
      </div>
    </div>
  )
}

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

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

export default connect(mapStateToProps, mapDispatchToProps)(SequenceEditor)