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

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

import * as liveActions from './actions'

class App 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)
  }
  componentWillUpdate(nextProps) {
    console.log('willupdate', nextProps.opt)
    if (! nextProps.epochs || nextProps.opt.checkpoint_name !== this.props.opt.checkpoint_name) {
      this.props.actions.list_epochs(nextProps.opt.checkpoint_name)
    }
    if (! nextProps.epochs || 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)
  }
  render(){
    return (
      <div className='app'>
        <Player />
        <div className='params'>
          <div className='column'>
            <ParamGroup
              title='Playback'
              noToggle
            >
              <Select
                name='send_image'
                title='view mode'
                options={['a','b','sequence','recursive']}
              />
              <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}
              />
              <Select
                name='sequence_name'
                title='sequence'
                options={this.props.sequences}
                onChange={this.changeSequence}
              />
            </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>
    )
  }
}

const mapStateToProps = state => ({
  opt: state.live.opt,
  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)(App)