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'

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 } = this.props
    console.log(actions)
    // if (biggan.loading) {
    //   return <Loading progress={biggan.progress} />
    // }
    return (
      <div className='app live centered'>
        <div className='row'>
          <div className='column'>
            <Player width={512} height={512} square fullscreen={this.props.fullscreen} />
          </div>
          <div className='params column audioParams'>
            <Group>
              {this.renderRestartButton()}
              <p class='last_message'>{this.props.last_message}</p>
            </Group>

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

            <Group
              title={"Label"}
              name='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={0.0001} max={10} type='float'
              />
              <Slider live
                name='label_lerp_n'
                title={"Mix"}
                min={0} max={1} type='float'
              />
            </Group>

            <Group
              title={"Orbit"}
              name='orbit'
            >
              <Slider live
                name='orbit_speed'
                title={"Orbit speed"}
                min={-4} max={4} type='float'
              />
              <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={"Noise Speed"}
                min={0} max={1} type='float'
              />
              <Slider live
                name='orbit_noise_n'
                title={"Noise Mix"}
                min={0} max={1} type='float'
              />
            </Group>

          </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.processing}
          onClick={this.togglePlaying}
        >{i18n.gpu.stop}</Button>
        <Button
          title={i18n.gpu.busy}
          onClick={() => this.interrupt()}
        >{i18n.gpu.interrupt}</Button>
      </div>
    )
  }
}


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