// @flow

import React from 'react'

import { Tabs, Tab } from 'react-bootstrap'

export class InfoPanel extends React.Component {
  state: {
    key: number
  }
  constructor (props: Object) {
    super(props)
    this.state = {
      key: 1
    }
  }
  handleSelect = (key: number) => {
    this.setState({
      key
    })
  }
  render () {
    if (!this.props.hostData) return <div>Waiting for Host Data..</div>
    return (
      <Tabs activeKey={this.state.key} onSelect={this.handleSelect} id='infoPanel'>
        <Tab eventKey={1} title='General'>
          <h4>Selected Host: {this.props.hostData.name}</h4>
          <div>UUID: {this.props.hostData.id}</div>
          <div>
            <h5>MySQL Version / Vendor</h5>
            <div>
              {this.props.hostData.version ? this.props.hostData.version : <div>Waiting for Version data...</div>}
            </div>
          </div>
          <div>
            <h5>Operating System</h5>
            <div>
              {this.props.hostData.ostype ? `${this.props.hostData.ostype} - ${this.props.hostData.osrelease}` : <div>Waiting for OS Data...</div>}
            </div>
          </div>
          <div>
            <h5>Heartbeat Graph</h5>
            {this.props.hostData.heartBeatData ? <div>Data</div> : <div>Waiting for Heartbeat Data...</div>}
          </div>
          <div>
            <h5>Memory Graph</h5>
            {this.props.hostData.memoryData ? <div>Data</div> : <div>Waiting for Memory Data...</div>}
          </div>
          <div>
            <h5>CPU Graph</h5>
            {this.props.hostData.cpuData ? <div>Data</div> : <div>Waiting for CPU Data...</div>}
          </div>
        </Tab>
        <Tab eventKey={2} title='Tuning'>
          Tuning
        </Tab>
        <Tab eventKey={3} title='Security'>
          Security
        </Tab>
        <Tab eventKey={4} title='Replication'>
          Replication
        </Tab>
        <Tab eventKey={5} title='Backups'>
          Backups
        </Tab>
      </Tabs>
    )
  }
}