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

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

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

import * as pix2pixhdTasks from '../pix2pixhd.tasks'
import actions from '../../../actions'

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

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,
      title: checkpoint.name + '_' + moment().format("YYYYMMDD")
    })
  }

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

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

  render() {
    const { app, pix2pixhd, remote, checkpoint, folder_id, processed } = this.props
    const { cursor, selection, title } = this.state
    const path = "sequences/" + checkpoint.name
    // console.log(checkpoint, pix2pixhd)
    return (
      <div className='sequenceEditor row'>
        {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>
            <Group title='New dataset'>
              <TextInput
                title='Title dataset'
                value={title}
                onInput={title => this.setState({ title: title.replace(/ /g, '_').replace(/\/\./g, '') })}
              />
              <Button
                title='Create a new dataset?'
                onClick={() => remote.splice_task({ title, sequence: checkpoint.name, selection, folder_id })}
              >
                Create
              </Button>
            </Group>
          </div>
        : <div className='form'><Group title='New dataset'>Please select some frames</Group></div>
        }
        <div className='rows'>
          <div className='row'>
            <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} />
            }
          </div>
          <Timeline
            sequence={checkpoint.sequence}
            onCursor={this.handleCursor}
            onSelect={this.handleSelect}
          />
        </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,
  pix2pixhd: state.module.pix2pixhd,
})

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

export default connect(mapStateToProps, mapDispatchToProps)(SequenceEditor)