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

import Player from '../common/player.component'
import ParamGroup from '../common/paramGroup.component'
import Slider from '../common/slider.component'
import Select from '../common/select.component'
import Button from '../common/button.component'

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

import * as liveActions from '../live/actions'

class LivePix2Pix extends Component {
  constructor(props){
    super()
    props.actions.get_params()
    props.actions.list_checkpoints()
    props.actions.list_sequences()
    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.list_epochs(nextProps.opt.checkpoint_name)
    }
  }
  changeCheckpoint(checkpoint_name){
    this.props.actions.load_epoch(checkpoint_name, 'latest')
  }
  changeEpoch(epoch_name){
    this.props.actions.load_epoch(this.props.opt.checkpoint_name, epoch_name)
  }
  changeSequence(sequence){
    console.log('got sequence', sequence)
    this.props.actions.load_sequence(sequence)
  }
  seek(percentage){
    const frame = Math.floor(percentage * (parseInt(this.props.frame.sequence_len) || 1) + 1)
    this.props.actions.seek(frame)
  }
  togglePlaying(){
    if (this.props.opt.processing) {
      this.props.actions.pause()
    } else {
      this.props.actions.play()
    }
  }
  toggleRecording(){
    if (this.props.opt.recording){
      stopRecording()
      this.props.actions.pause()  
    } else {
      startRecording()
    }
  }
  render(){
    return (
      <div className='app'>
        <Player width={424} height={256} />
        <div className='params'>
          <div className='column'>
            <ParamGroup
              title='Playback'
              noToggle
            >
              <Select
                name='send_image'
                title='view mode'
                options={['a','b','sequence','recursive']}
              />
              <Select
                name='sequence_name'
                title='sequence'
                options={this.props.sequences}
                onChange={this.changeSequence}
              />
              <Select
                name='checkpoint_name'
                title='checkpoint'
                options={this.props.checkpoints}
                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}
              />
              <Button
                title={'Processing: ' + (this.props.opt.processing ? 'yes' : 'no')}
                onClick={this.togglePlaying}
              >
                {this.props.opt.processing ? 'Pause' : 'Restart'}
              </Button>
              <Button
                title={
                  this.props.opt.savingVideo
                  ? 'Saving video...'
                  : this.props.opt.recording
                  ? 'Recording (' + timeInSeconds(this.props.opt.recordFrames) +')'
                  : '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>
          </div>
          <div className='column'>
            <ParamGroup
              title='Transition'
              name='transition'
            >
              <Slider
                name='transition_period'
                min={10} max={5000} type='int'
              />
              <Slider
                name='transition_min'
                min={0.001} max={0.2} type='float'
              />
              <Slider
                name='transition_max'
                min={0.1} max={1.0} type='float'
              />
            </ParamGroup>

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

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

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

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

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

          </div>
        </div>
      </div>
    )
  }
}
function timeInSeconds(n){
  return (n / 10).toFixed(1) + ' s.'
}
const mapStateToProps = state => ({
  opt: state.live.opt,
  frame: state.live.frame,
  checkpoints: state.live.checkpoints,
  epochs: state.live.epochs,
  sequences: state.live.sequences,
})

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

export default connect(mapStateToProps, mapDispatchToProps)(LivePix2Pix)