import { h, Component } from 'preact'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import {
  ParamGroup, Param, Player,
  Slider, Select, Button, Loading
} from '../../../common/'

import { startRecording, stopRecording, saveFrame, toggleFPS } from '../../../live/player'

import * as liveActions from '../../../live/live.actions'
import * as queueActions from '../../../queue/queue.actions'
import * as pix2pixTasks from '../pix2pix.tasks'
import * as pix2pixActions from '../pix2pix.actions'

class Pix2PixLive extends Component {
  constructor(props){
    super()
    // if (! props.pix2pix || ! props.pix2pix.data) {
      props.actions.pix2pix.load_directories()
    // }
    props.actions.live.get_params()
    // props.actions.live.list_checkpoints('pix2pix')
    // props.actions.live.list_sequences('pix2pix')
    this.changeCheckpoint = this.changeCheckpoint.bind(this)
    this.changeEpoch = this.changeEpoch.bind(this)
    this.changeSequence = this.changeSequence.bind(this)
    this.seek = this.seek.bind(this)
    this.togglePlaying = this.togglePlaying.bind(this)
    this.toggleRecording = this.toggleRecording.bind(this)
  }
  componentWillUpdate(nextProps) {
    if (nextProps.opt.checkpoint_name && nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
      this.props.actions.live.list_epochs('pix2pix', nextProps.opt.checkpoint_name)
    }
  }
  changeCheckpoint(field, checkpoint_name){
    this.props.actions.live.load_epoch(checkpoint_name, 'latest')
  }
  changeEpoch(field, epoch_name){
    this.props.actions.live.load_epoch(this.props.opt.checkpoint_name, epoch_name)
  }
  changeSequence(field, sequence){
    console.log('load sequence', sequence)
    this.props.actions.live.load_sequence(sequence)
  }
  seek(percentage){
    const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1)
    console.log("seek to frame", percentage, frame)
    this.props.actions.live.seek(frame)
  }
  start(){
    // console.log(this.props)
    const sequence = this.props.pix2pix.data.sequences[0].name
    const checkpoint = this.props.pix2pix.data.checkpoints[0].name
    console.log('starting up!', sequence, checkpoint)
    this.props.actions.tasks.live_task(sequence, checkpoint)
  }
  interrupt(){
    this.props.actions.queue.stop_task('gpu')
  }
  togglePlaying(){
    if (this.props.opt.processing) {
      this.props.actions.live.pause()
    } else {
      this.props.actions.live.play()
    }
  }
  toggleRecording(){
    if (this.props.opt.recording){
      stopRecording()
      this.props.actions.live.pause()  
    } else {
      startRecording()
    }
  }
  render(){
    // console.log(this.props)
    if (this.props.pix2pix.loading) {
      return <Loading />
    }
    return (
      <div className='app centered'>
        <Player width={424} height={256} />
        <div className='params row'>
          <div className='column'>
            <ParamGroup
              title='Playback'
              noToggle
            >
              <Select
                name='send_image'
                title='view mode'
                options={['a','b','sequence','recursive']}
                onChange={this.props.actions.live.set_param}
              />
              <Select
                name='sequence_name'
                title='sequence'
                options={this.props.pix2pix.data.sequences.map(file => file.name)}
                onChange={this.changeSequence}
              />
              <Select
                name='checkpoint_name'
                title='checkpoint'
                options={this.props.pix2pix.data.checkpoints.map(file => file.name)}
                onChange={this.changeCheckpoint}
              />
              <Select
                name='epoch'
                title='epoch'
                options={this.props.epochs}
                onChange={this.changeEpoch}
              />
              <Slider
                name='position'
                min={0.0} max={1.0} type='float'
                value={(this.props.frame.sequence_i || 0) / (this.props.frame.sequence_len || 1)}
                onChange={this.seek}
              />
              <Slider live
                name='frame_delay'
                min={0.05} max={2.0} type='float'
              />
              {this.renderRestartButton()}
              <Button
                title={
                  this.props.opt.savingVideo
                  ? 'Saving video...'
                  : this.props.opt.recording
                  ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames/25) +')'
                  : 'Record video'
                }
                onClick={this.toggleRecording}
              >
                {this.props.opt.savingVideo ? 'Saving' : this.props.opt.recording ? 'Recording' : 'Record'}
              </Button>
              <Button
                title={'Save frame'}
                onClick={saveFrame}
              >
                Save
              </Button>
              <ParamGroup
                title='Render on server'
                name='store_b'
                onToggle={(value) => {
                  // now storing frames on server...
                }}
              >
              </ParamGroup>

              <p className='last_message'>{this.props.last_message}</p>
            </ParamGroup>
          </div>
          <div className='column'>
            <ParamGroup
              title='Transition'
              name='transition'
            >
              <Slider live
                name='transition_period'
                min={10} max={5000} type='int'
              />
              <Slider live
                name='transition_min'
                min={0.001} max={0.2} type='float'
              />
              <Slider live
                name='transition_max'
                min={0.1} max={1.0} type='float'
              />
            </ParamGroup>

            <ParamGroup
              title='Recursion'
              name='recursive'
            >
              <Slider live
                name='recursive_frac'
                min={0.0} max={0.5} type='float'
              />
              <Slider live
                name='recurse_roll'
                min={-64} max={64} type='int'
              />
              <Slider live
                name='recurse_roll_axis'
                min={0} max={1} type='int'
              />
            </ParamGroup>

            <ParamGroup
              title='Sequence'
              name='sequence'
            >
              <Slider live
                name='sequence_frac'
                min={0.0} max={0.5} type='float'
              />
              <Slider live
                name='process_frac'
                min={0} max={1} type='float'
              />
            </ParamGroup>
          </div>
          <div className='column'>
            <ParamGroup
              title='Clahe'
              name='clahe'
            >
              <Slider live
                name='clip_limit'
                min={1.0} max={4.0} type='float'
              />
            </ParamGroup>

            <ParamGroup
              title='Posterize'
              name='posterize'
            >
              <Slider live
                name='spatial_window'
                min={2} max={128} type='int'
              />
              <Slider live
                name='color_window'
                min={2} max={128} type='int'
              />
            </ParamGroup>

            <ParamGroup
              title='Blur'
              name='blur'
            >
              <Slider live
                name='blur_radius'
                min={3} max={7} type='odd'
              />
              <Slider live
                name='blur_sigma'
                min={0} max={2} type='float'
              />
            </ParamGroup>

            <ParamGroup
              title='Canny Edge Detection'
              name='canny'
            >
              <Slider live
                name='canny_lo'
                min={10} max={200} type='int'
              />
              <Slider live
                name='canny_hi'
                min={10} max={200} type='int'
              />
            </ParamGroup>

          </div>
        </div>
      </div>
    )
  }
  renderRestartButton(){
    if (this.props.runner.gpu.status === 'IDLE') {
      return (
        <Button
          title={'GPU Idle'}
          onClick={() => this.start()}
        >Start</Button>
      )
    }
    if (this.props.runner.gpu.task.module !== 'pix2pix') {
      return (
        <Button
          title={'GPU Busy'}
          onClick={() => this.interrupt()}
        >Interrupt</Button>
      )
    }
    if (! this.props.opt.processing) {
      return (
        <div>
          <Button
            title={'Not processing'}
            onClick={this.togglePlaying}
          >Restart</Button>
          <Button
            title={'GPU Busy'}
            onClick={() => this.interrupt()}
          >Interrupt</Button>
        </div>
      )
    }
    return (
      <div>
        <Button
          title={'Processing'}
          onClick={this.togglePlaying}
        >Stop</Button>
        <Button
          title={'GPU Busy'}
          onClick={() => this.interrupt()}
        >Interrupt</Button>
      </div>
    )
  }
}
function timeInSeconds(n){
  return n.toFixed(1) + ' s.'
}
const mapStateToProps = state => ({
  last_message: state.live.last_message,
  opt: state.live.opt,
  frame: state.live.frame,
  checkpoints: state.live.checkpoints,
  epochs: state.live.epochs,
  sequences: state.live.sequences,
  runner: state.system.runner,
  pix2pix: state.module.pix2pix,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: {
    live: bindActionCreators(liveActions, dispatch),
    queue: bindActionCreators(queueActions, dispatch),
    pix2pix: bindActionCreators(pix2pixActions, dispatch),
    tasks: bindActionCreators(pix2pixTasks, dispatch),s
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Pix2PixLive)