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

import {
  ParamGroup, Param, Player, Group,
  Slider, SelectGroup, Select, TextInput, 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 bigganTasks from '../biggan.tasks'
import * as bigganActions from '../biggan.actions'
import BigGANCategoryList from './biggan.categoryList.js'
import BigGANEncodingList from './biggan.encodingList.js'
import { frameTimestamp } from '../../../util'

class BigGANLive extends Component {
  constructor(props) {
    super()
    props.actions.live.get_params()
  }
  start(){
    // console.log(this.props.opt)
    console.log('starting up!')
    this.props.actions.tasks.live_task({
      // folder_id: this.props.biggan.data.resultsFolder.id,
    })
  }
  interrupt(){
    this.props.actions.queue.stop_task('gpu')
  }
  render() {
    const { biggan, actions, frame } = this.props
    // console.log(actions)
    // if (biggan.loading) {
    //   return <Loading progress={biggan.progress} />
    // }
    return (
      <div className='app live biggan centered'>
        <div className='row'>
          <div className='column'>
            <Player width={512} height={512} square fullscreen={this.props.fullscreen} />
          </div>
          <div className='params column audioParams'>
            <div className='spacer'>
              {frame.i ?
                <div className='param'>
                  <span>Frame #{frame.i}</span>
                  {frameTimestamp(frame.i)}
                </div>
                : <div className='param'><span></span></div>
              }
            </div>

            <Group title="Player">
              {this.renderRestartButton()}
            </Group>

            <Group title={"Latent"}>
              <Button
                title={"Shuffle"}
                onClick={() => actions.live.send_command('switch', 'latent')}
              >{"Latent"}</Button>
              <Slider live
                name='latent_speed'
                title={"Update Speed"}
                min={1} max={250} type='int'
              />
              <Slider live
                name='truncation'
                title={"Truncation"}
                min={0.0001} max={4} type='float'
              />
            </Group>

            <Group title={"Label"}>
              <Slider live
                name='num_classes'
                title={"Classes to mix"}
                min={1} max={10} type='int'
              />
              <Button
                title={"Shuffle"}
                onClick={() => actions.live.send_command('switch', 'label')}
              >{"Label"}</Button>
              <Slider live
                name='label_speed'
                title={"Mix Speed"}
                min={1} max={250} type='int'
              />
            </Group>

            <Group title={"Orbit"}>
              <Slider live
                name='orbit_speed'
                title={"Orbit speed"}
                min={-250} max={250} type='int'
              />
              <Slider live
                name='orbit_radius'
                title={"Radius"}
                min={0} max={1.0} type='float'
              />
              <Button
                title={"Shuffle"}
                onClick={() => actions.live.send_command('switch', 'orbit_noise')}
              >{"Spin"}</Button>
              <Slider live
                name='orbit_noise_speed'
                title={"Shuffle Speed"}
                min={1} max={250} type='int'
              />
            </Group>

            <Group title={"Saturation"}>
              <Slider live
                name='abs_zoom'
                title={"Amount"}
                min={0} max={4} type='float'
              />
              <Slider live
                name='abs_mix_n'
                title={"Saturation mix"}
                min={0} max={1} type='float'
              />
            </Group>
          </div>
          <div className='params column'>
            <BigGANCategoryList />
          </div>
          <div className='params column'>
            <BigGANEncodingList />
          </div>
        </div>
      </div>
    )
  }
  renderRestartButton(){
    // console.log(this.props.runner.gpu)
    const { i18n } = this.props
    if (this.props.runner.gpu.status === 'IDLE') {
      return (
        <Button
          title={i18n.gpu.idle}
          onClick={() => this.start()}
        >{i18n.gpu.start}</Button>
      )
    }
    if (this.props.runner.gpu.task.module !== 'biggan') {
      return (
        <Button
          title={i18n.gpu.busy}
          onClick={() => this.interrupt()}
        >{i18n.gpu.interrupt}</Button>
      )
    }
    // if (! this.props.opt.processing) {
    //   return (
    //     <div>
    //       <Button
    //         title={i18n.gpu.not_processing}
    //         onClick={this.togglePlaying}
    //       >{i18n.gpu.restart}</Button>
    //       <Button
    //         title={i18n.gpu.busy}
    //         onClick={() => this.interrupt()}
    //       >{i18n.gpu.interrupt}</Button>
    //     </div>
    //   )
    // }
    return (
      <div>
        <Button
          title={i18n.gpu.busy}
          onClick={() => this.interrupt()}
        >{i18n.gpu.stop}</Button>
      </div>
    )
  }
}


const mapStateToProps = state => ({
  fullscreen: state.live.fullscreen,
  opt: state.live.opt,
  frame: state.live.frame,
  runner: state.system.runner,
  i18n: state.system.i18n.strings,
  biggan: state.module.biggan,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: {
    live: bindActionCreators(liveActions, dispatch),
    queue: bindActionCreators(queueActions, dispatch),
    biggan: bindActionCreators(bigganActions, dispatch),
    tasks: bindActionCreators(bigganTasks, dispatch),
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(BigGANLive)