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 taskActions from '../task/task.actions'

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: {}
}

class System extends Component {
  constructor(props){
    super()
  }
  componentDidUpdate(){
    console.log(this._screen.scrollHeight, this._screen.scrollTop, this._screen.offsetHeight)
    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 } = this.props
    return (
      <div className='system'>
        <div className='heading'>
          <h2>{site.name} System</h2>
        </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="Test">
              <Param title='CPU Test Task'>
                <button onClick={() => actions.task.start_task(cpu_test_task, { preempt: true, watch: true })}>Start</button>
                <button onClick={() => actions.task.stop_task(cpu_test_task)}>Stop</button>
              </Param>
              <Param title='GPU Test Task'>
                <button onClick={() => actions.task.start_task(gpu_test_task, { preempt: true, watch: true })}>Start</button>
                <button onClick={() => actions.task.stop_task(gpu_test_task)}>Stop</button>
              </Param>
              <Param title='Live Test Task'>
                <button onClick={() => actions.task.start_task(live_test_task, { preempt: true, watch: true })}>Start</button>
                <button onClick={() => actions.task.stop_task(live_test_task)}>Stop</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 => ({
  ...state.system
})

const mapDispatchToProps = (dispatch, ownProps) => ({
  actions: {
    system: bindActionCreators(systemActions, dispatch),
    task: bindActionCreators(taskActions, dispatch),
  },
})

export default connect(mapStateToProps, mapDispatchToProps)(System)