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'

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'>
          <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'>pix2pix dataset.py</Param>
            <Param title='GPU'>pix2pix train.py</Param>
            <Param title='Current Task'>train samplernn</Param>
          </Group>
          <Group title="Diagnostics">
            <Param title='Commands'>
              <button onClick={() => actions.run('nvidia-smi')}>nvidia-smi</button>
              <button onClick={() => actions.run('ps')}>ps</button>
              <button onClick={() => actions.run('w')}>w</button>
            </Param>
          </Group>
        </div>
        {this.renderCommandOutput()}
      </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: bindActionCreators(systemActions, dispatch)
})

export default connect(mapStateToProps, mapDispatchToProps)(System)