import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router-dom';
import { connect } from 'react-redux'
import util from '../../../util'

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

import * as morphActions from '../morph.actions'
import * as morphTasks from '../morph.tasks'

import Loading from '../../../common/loading.component'
import {
  Select, Slider, Checkbox, Group,
  Button, Param, FileList, FileRow,
  CurrentTask,
} from '../../../common'

let yes_count = 0

class MorphResults extends Component {
  constructor(props){
    super()
    this.state = {
      dataset_module: 'pix2pixhd',
      a: "PLACEHOLDER",
      b: "PLACEHOLDER",
      a_offset: 0,
      a_duration: 1,
      a_pos: 0,
      b_offset: 0,
      b_duration: 1,
      b_pos: 0,
      steps: 16,
      dilate: 2,
      frames: 32,
      padding: 3,
      smooth: true,
      mode: 'mix',
    }
    if (!props.morph.data) props.actions.load_data()
  }
  componentDidMount(){
    yes_count = 0
  }
  render(){
    if (! this.props.morph.app) return <Loading progress={this.props.morph.progress} />

    const { resultsFolder, sequences, renders, files } = this.props.morph.app
    const sequence_options = sequences.map(sequence => [
      sequence.name.split("_").slice(0, 3).join(" ") + "~ (" + sequence.count + ")",
      sequence.name
    ])
    const sequenceLookup = sequences.reduce((a,b) => (a[b.name]=b,a), {})

    const totalLength = this.state.frames / 25
    let lengthWarning
    if ((this.state.steps / this.state.dilate) > 64 && this.state.mode === 'mix') {
      lengthWarning = (
        <span><br/>warning, this will take a while</span>
      )
    }

    return (
      <div className='app morph'>
        <div className='heading row middle'>
          <h1>Morph</h1>
        </div>
        <div className='rows params renders'>
          <div className='column'>
            <Group title="From">
              <Select
                title="Starting sequence"
                placeholder="Please choose a video"
                value={this.state.a}
                options={sequence_options}
                onChange={(name, key) => this.setState({ a: key, a_duration: sequenceLookup[key].count, a_pos: 0, a_offset: 0 })}
              />
              <Slider
                title="Offset"
                value={this.state.a_pos}
                min={0} max={1} step={0.01}
                onChange={key => this.setState({ a_pos: key, a_offset: Math.floor(key * (this.state.a_duration - this.state.frames)) })}
              />
            </Group>

            <Group title="To">
              <Select
                title="Ending sequence"
                placeholder="Please choose a video"
                value={this.state.b}
                options={sequence_options}
                onChange={(name, key) => this.setState({ b: key, b_duration: sequenceLookup[key].count, b_pos: 0, b_offset: 0 })}
              />
              <Slider
                title="Offset"
                value={this.state.b_pos}
                min={0} max={1} step={0.01}
                onChange={key => this.setState({ b_pos: key, b_offset: Math.floor(key * (this.state.b_duration - this.state.frames))  })}
              />
            </Group>

            <Group title="Morph Settings">
              <Select
                title={"Mode"}
                value={this.state.mode}
                options={['mix', 'average', 'mix_images']}
                onChange={(name, key) => this.setState({ mode: key })}
              />
              <Slider
                type="list"
                title="Steps"
                value={this.state.steps}
                options={[2,4,8,16,32,64,128,256,512,1024,2048,4096]}
                onChange={key => this.setState({ steps: key, frames: (key * this.state.dilate) })}
              />
              <Slider
                type="list"
                title="Dilate"
                value={this.state.dilate}
                options={[1,2,4,8,16,32]}
                onChange={key => this.setState({ dilate: key, frames: (this.state.steps * key) })}
              />
              <Checkbox
                title="Smooth"
                value={this.state.smooth}
                onToggle={key => this.setState({ smooth: key })}
              />
              <Slider
                type="int"
                title="Padding (in seconds)"
                value={this.state.padding}
                min={0} max={30} step={1}
                onChange={key => this.setState({ padding: key })}
              />
              <Button
                title="Run task"
                value="Morph!"
                onClick={() => this.props.remote.morph_task(this.state, resultsFolder)}
              />
              <br />
              <Param title="Total length">
                {totalLength.toFixed(1) + " seconds"}
              </Param>
              <Param title="Total frames">
                {this.state.frames + " frames"}
              </Param>
              {lengthWarning}
              <br />
              <CurrentTask />
            </Group>
          </div>

          <h3>morphed videos</h3>
          <FileList
            linkFiles
            files={files}
            orderBy='date desc'
            fields={'name datetime size delete'}
            onDelete={file => {
              let yes;
              if (yes_count < 3) {
                yes = confirm('Are you sure you want to delete this file?')
              } else {
                yes = true
              }
              if (yes) {
                yes_count += 1
                console.log('delete: confirmed')
                actions.file.destroy(file)
              }
            }}
          />
          <br />

          <h3>renders on server</h3>
          <FileList
            files={renders}
            orderBy='date desc'
            fields={'name datetime time size'}
            onClick={(file, e) => {
              e.preventDefault()
              e.stopPropagation()
              console.log('picked a result', file)
              this.handlePick(file)
            }}
          />

        </div>
      </div>
    )
  }
  handlePick(file){
    // this.props.audioPlayer.play(file)
  }
}

const mapStateToProps = state => ({
  morph: state.module.morph,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: bindActionCreators(morphActions, dispatch),
  remote: bindActionCreators(morphTasks, dispatch),
  // audioPlayer: bindActionCreators(audioPlayerActions, dispatch),
})

export default connect(mapStateToProps, mapDispatchToProps)(MorphResults)