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

import {
  Loading, Group, Slider, Button
} from '../../../common/'

import actions from '../../../actions'
import * as bigganTasks from '../biggan.tasks'
import * as bigganActions from '../biggan.actions'
import { frameTimestamp } from '../../../util/format'

class BigGANEncodingList extends Component {
  state = {
    file_id: 0,
  }

  componentDidMount() {
    if (!this.props.biggan.encodings) {
      this.props.actions.biggan.load_encodings()
    }
  }

  render() {
    const { file_id } = this.state
    const { opt, frame } = this.props
    const { encodings, encoding_order } = this.props.biggan
    if (!encodings) {
      return <div>Loading encodings...</div>
    }
    return (
      <div>
        <div className="spacer">
          {frame.i ?
            <div className='param frame_counter'>
              <span>Frame #{frame.i}</span>
              <var>{frameTimestamp(frame.i)}</var>
            </div>
            : <div className='param frame_counter'><span></span></div>
          }
        </div>
        <Group title={"Stored Image"}>
          <Slider live
            name='encoding_stored_speed'
            title={"Load speed"}
            min={1} max={250} type='int'
          />
          <Slider live
            name='encoding_stored_n'
            title={"Image mix"}
            min={0} max={1} type='float'
          />
        </Group>
        <Group title={"Latent to Image Transition"}>
          <Button
            title={"Toggle"}
            onClick={() => file_id && actions.live.send_command('switch', 'encoding_stored_mix')}
          >{file_id
            ? opt.encoding_stored_mix_n < 0.5
               ? "To Image"
               : "Back to Latent"
            : "Not loaded"}</Button>
          <Slider live
            name='encoding_stored_mix_speed'
            title={"Transition speed"}
            min={1} max={250} type='int'
          />
          <Slider live
            name='encoding_stored_mix_n'
            title={"Transition mix"}
            min={0} max={1} type='float'
          />
        </Group>
        <Group title={"Encoding Orbit"}>
          <Slider live
            name='encoding_orbit_speed'
            title={"Orbit speed"}
            min={0} max={250} type='int'
          />
          <Slider live
            name='encoding_orbit_radius'
            title={"Radius"}
            min={0} max={0.1} step={0.001} type='float'
          />
          <Button
            title={"Shuffle"}
            onClick={() => actions.live.send_command('switch', 'encoding_orbit_noise')}
          >{"Spin"}</Button>
          <Slider live
            name='encoding_orbit_noise_speed'
            title={"Shuffle Speed"}
            min={1} max={250} type='int'
          />
        </Group>
        <div className="categories encodings" ref={ref => this.categoryRef = ref}>
          {encoding_order.map(name => {
            return (
              <div key={name}>
                <h3>{name}</h3>
                {encodings[name].map(file => (
                  <img
                    key={file.id}
                    src={file.url}
                    onClick={() => {
                      actions.live.send_command('setEncoding', JSON.stringify({
                        id: file.id,
                      }))
                      this.setState({ file_id: file.id })
                    }}
                  />
                ))}
              </div>
            )
          })}
        </div>
      </div>
    )
  }

}

const mapStateToProps = state => ({
  last_message: state.live.last_message,
  opt: state.live.opt,
  frame: state.live.frame,
  biggan: state.module.biggan,
})

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

export default connect(mapStateToProps, mapDispatchToProps)(BigGANEncodingList)