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',
  library: 'test',
  dataset: 'test',
  epochs: 1,
  opt: {}
}
const gpu_test_task = {
  activity: 'gpu',
  library: 'test',
  dataset: 'test',
  epochs: 1,
  opt: {}
}
const live_test_task = {
  activity: 'live',
  library: 'test',
  dataset: 'test',
  epochs: 1,
  opt: {}
}

class System extends Component {
  constructor(props){
    super()
  }
  render(){
    const { site, server, relay, 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'>{rpc.cpu_cmd}</Param>
              <Param title='GPU'>{rpc.gpu_cmd}</Param>
              <Param title='Current Task'>train samplernn</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>
    )
  }
  renderCommandOutput(){
    const { cmd } = 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
        }
      }
    }
    return (
      <div>
        <div 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)