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

import Group from '../common/group.component'
import Param from '../common/param.component'

import * as systemActions from './system.actions'
import * as liveActions from '../live/live.actions'
import * as queueActions from '../queue/queue.actions'
import * as authActions from '../auth/auth.actions'

import * as i18n from '../i18n'

const cpu_test_task = {
  activity: 'cpu',
  module: 'test',
  dataset: 'test',
  epochs: 1,
  opt: {}
}
const gpu_test_task = {
  activity: 'gpu',
  module: 'test',
  dataset: 'test',
  epochs: 1,
  opt: {}
}
const live_test_task = {
  activity: 'live',
  module: 'test',
  dataset: 'test',
  epochs: 1,
  opt: {}
}
const wait_test_task = {
  activity: 'wait',
  module: 'test',
  dataset: 'test',
  epochs: 1,
  opt: {}
}
const fruits = ["apple","pear","orange","strawberry"]
function choice(a){ return a[Math.floor(Math.random()*a.length)]}

class System extends Component {
  constructor(props){
    super()
  }
  componentDidUpdate(){
    if (this._screen.scrollHeight > this._screen.scrollTop - this._screen.offsetHeight + 100) {
      this._screen.scrollTop = this._screen.scrollHeight
    }
  }
  render(){
    const { site, server, relay, runner, rpc, actions, user } = this.props
    return (
      <div className='app system'>
        <div className='heading'>
          <h1>{site.name} system</h1>
        </div>
        <div className='row params'>
          <div className='column'>
            <Group title="Status">
              <Param title='Server'>{server.status}</Param>
              {server.error &&
                <Param title='Server error'>{server.error.message}</Param>
              }
              <Param title='Relay'>{relay.status}</Param>
              <Param title='RPC'>{rpc.status}</Param>
              <Param title='CPU'>{this.renderStatus(runner.cpu)}</Param>
              <Param title='GPU'>{this.renderStatus(runner.gpu)}</Param>
            </Group>
            <Group title="Diagnostics">
              <Param title='Check GPU'>
                <button onClick={() => actions.system.run('nvidia-smi')}>nvidia-smi</button>
              </Param>
              <Param title='List processes'>
                <button onClick={() => actions.system.run('ps')}>ps</button>
              </Param>
              <Param title='List users'>
                <button onClick={() => actions.system.run('w')}>w</button>
              </Param>
              <Param title='Disk free space'>
                <button onClick={() => actions.system.run('df')}>df</button>
              </Param>
            </Group>
            <Group title="Tasks">
              <Param title='Kill task'>
                <button onClick={() => actions.queue.stop_task('cpu')}>CPU</button>
                <button onClick={() => actions.queue.stop_task('gpu')}>GPU</button>
              </Param>
              <Param title='Queue'>
                <button onClick={() => actions.queue.start_queue()}>Start</button>
                <button onClick={() => actions.queue.stop_queue()}>Stop</button>
              </Param>
            </Group>
            <Group title="Auth">
              <Param title={'Logged in as ' + user.username}>
                <button onClick={() => actions.auth.logout()}>Logout</button>
              </Param>
            </Group>
            <Group title="Test">
              <Param title='CPU Test Task'>
                <button onClick={() => actions.queue.start_task(cpu_test_task, { preempt: true, watch: true })}>Start</button>
                <button onClick={() => actions.queue.stop_task(runner.cpu.task)}>Stop</button>
              </Param>
              <Param title='GPU Test Task'>
                <button onClick={() => actions.queue.start_task(gpu_test_task, { preempt: true, watch: true })}>Start</button>
                <button onClick={() => actions.queue.stop_task(runner.gpu.task)}>Stop</button>
              </Param>
              <Param title='Live Test Task'>
                <button onClick={() => actions.queue.start_task(live_test_task, { preempt: true, watch: true })}>Start</button>
                <button onClick={() => actions.queue.stop_task(runner.cpu.task)}>Stop</button>
              </Param>
              <Param title='Test Live RPC'>
                <button onClick={() => actions.live.get_params()}>Get</button>
                <button onClick={() => actions.live.set_param('fruit', choice(fruits))}>Set</button>
              </Param>
              <Param title='Queue Tests'>
                <button onClick={() => actions.system.enqueue_test_task(choice(fruits))}>+Add test task</button>
              </Param>
              <Param title=''>
                <button onClick={() => actions.queue.start_task(wait_test_task, { preempt: true, watch: true })}>Wait and Buzz</button>
              </Param>
            </Group>
            <Group title="Internationalization">
              <Param title="Language">
                {i18n.languages.map(language => (
                  <button onClick={() => actions.system.changeLanguage(language)}>{language}</button>
                ))}
              </Param>
            </Group>
          </div>
          {this.renderCommandOutput()}
        </div>
      </div>
    )
  }
  renderStatus(processor){
    if (!processor) {
      return 'unknown'
    }
    if (processor.status === 'IDLE') {
      return 'idle'
    }
    const task = processor.task
    return task.activity + ' ' + task.module
  }
  renderCommandOutput(){
    const { cmd, stdout, stderr } = this.props
    let output
    if (cmd.loading) {
      output = 'Loading: ' + cmd.name
    }
    else if (cmd.loaded) {
      if (cmd.error) {
        output = 'Error: ' + cmd.name + '\n\n' + JSON.stringify(cmd.error, null, 2)
      } else {
        output = cmd.stdout
        if (cmd.stderr) {
          output += '\n\n_________________________________\n\n'
          output += cmd.stderr
        }
      }
    }
    else {
      output = stdout
      if (stderr.length) {
        output += '\n\n_________________________________\n\n'
        output += stderr
      }
    }
    return (
      <div>
        <div ref={(ref) => this._screen = ref} className='screen'>{output}</div>
      </div>
    )
  }
}
const mapStateToProps = state => ({
  user: state.auth.user,
  ...state.system,
  ...state.live,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: {
    auth: bindActionCreators(authActions, dispatch),
    system: bindActionCreators(systemActions, dispatch),
    queue: bindActionCreators(queueActions, dispatch),
    live: bindActionCreators(liveActions, dispatch),
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(System)