import React, {Component} from 'react'
// import {searchItems} from '../../Layout/table_utils'
import {Table, Column} from '../../Layout/components/C2Table'


const getColor = severity => {
  if (severity === "Critical") {
    return 'BackgroundColor-red'
  } else if (severity === "Major") {
    return 'BackgroundColor-orange'
  } else {
    return 'Normal'
  }
}




export default class AlarmDashboardTableDefinition extends Component {
  static propTypes = {
    user: React.PropTypes.object,
    alarms: React.PropTypes.object,
    selectedZone: React.PropTypes.string,
    loading: React.PropTypes.bool,
    loginId: React.PropTypes.string,
    onTechClick: React.PropTypes.func,
    onSiteClick: React.PropTypes.func,
    showTechColumn: React.PropTypes.bool,
    showSitesColumn: React.PropTypes.bool
  }

  getBaseLink (site) {
    return `/techs/${this.props.loginId}/sites/${site.site_uid}/alarms`
  }

  renderTable = alarms => {
    let columns = [
      <Column
        id="cell_oos"
        header="Cell OOS"
        cellClassName={row => getColor(row.cell_oos_severity)}
      />
      <Column
        id="cell_lte_oos"
        header="Cell LTE OOS"
        cellClassName={row => getColor(row.cell_lte_oos_severity)}
      />
      <Column
        id="commercial_power_fail"
        header="Power Fail"
        cellClassName={row => getColor(row.commercial_power_fail_severity)}
      />
      <Column
        id="gen_fail"
        header="Gen Fail"
        cellClassName={row => getColor(row.gen_fail_severity)}
      />
      <Column
        id="gen_run"
        header="Gen Run"
        cellClassName={row => getColor(row.gen_run_severity)}
      />
      <Column
        id="battery_discharge"
        header="Battery Discharge"
        cellClassName={row => getColor(row.battery_discharge_severity)}
      />
      <Column
        id="multiple_rectifier_fail"
        header="Multiple Rectifier Fail"
        cellClassName={row => getColor(row.multiple_rectifier_fail_severity)}
      />
      <Column
        id="rectifier_fail"
        header="Rectifier Fail"
        cellClassName={row => getColor(row.rectifier_fail_severity)}
      />
      <Column
        id="high_temp"
        header="High Temp"
        cellClassName={row => getColor(row.high_temp_severity)}
      />
      <Column
        id="low_fuel"
        header="Low Fuel"
        cellClassName={row => getColor(row.low_fuel_severity)}
      />
      <Column
        id="smoke_fire"
        header="Smoke/Fire"
        cellClassName={row => getColor(row.smoke_fire_severity)}
      />
      <Column
        id="transport"
        header="Transport"
        cellClassName={row => getColor(row.transport_severity)}
      />
      <Column
        id="rtt"
        header="RTT"
        cellClassName={row => getColor(row.rtt_severity)}
      />
      <Column
        id="surge_lightning_arrestor"
        header="Surge Lightning Arrestor"
        cellClassName={row => getColor(row.surge_lightning_arrestor_severity)}
      />
    ]

    // if(this.props.children){
    //   columns.push(children)
    // }

    // console.log(alarms)
    return (
        <Table
          rowId={row => row.site_unid +row.site_uid +row.siteid +row.managerid}
          data={alarms.toJS()}
          id="device-adder"
          className="table table-condensed table-striped sortable table-bordered text-left eoc-alarms-table"
        >
          {columns}
        </Table>
    )
  }

  render () {
    let {alarms} = this.props

    return (
      <div>
        <div className="row">

        </div>
        <div className="row">
          <div className="col-xs-12">
            {alarms.size ? this.renderTable(alarms) : <div className="text-center">No alarms found...<br/></div>}
          </div>
        </div>
      </div>
    )
  }
}



         //  <Column
          //   id="siteid"
          //   excelLabel="Site # / Switch"
          //   excelValue={row => `#${row.siteid} ${row.switch}`}
          //   searchValue={row => {
          //     return `#${row.siteid} ${row.switch} ${row.enodeb_ids}`
          //   }}
          //   headerClassName="width-auto"
          //   header="Site # / Switch"
          //   cell={row => (
          //     <Link to={this.getBaseLink(row)}>
          //       <strong>
          //         {`#${row.siteid} ${row.switch}`}
          //       </strong>
          //     </Link>
          //   )}
          // />