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

import Group from '../common/group.component'
import Slider from '../common/slider.component'
import Select from '../common/select.component'
import Button from '../common/button.component'

import * as systemActions from './system.actions'

class System extends Component {
  constructor(props){
    super()
  }
  render(){
    const { site, actions } = this.props
    return (
      <div className='dashboard'>
        <div className='heading'>
          <h2>{site.name} System</h2>
        </div>

        <div className='column'>
          <Group title="Diagnostics">
            <button onClick={() => actions.run('nvidia-smi')}>nvidia-smi</button>
            <button onClick={() => actions.run('ps')}>ps</button>
            <button onClick={() => actions.run('w')}>w</button>
          </Group>
          {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 => ({
  site: state.system.site,
  cmd: state.system.cmd,
})

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

export default connect(mapStateToProps, mapDispatchToProps)(System)