import React, {PropTypes} from 'react'
import {Link} from 'react-router'
import _ from 'lodash'

import Authorized, {EDITOR_ROLE} from 'src/auth/Authorized'

import {KAPACITOR_RULES_TABLE} from 'src/kapacitor/constants/tableSizing'
const {
  colName,
  colTrigger,
  colMessage,
  colAlerts,
  colEnabled,
  colActions,
} = KAPACITOR_RULES_TABLE

const KapacitorRulesTable = ({rules, source, onDelete, onChangeRuleStatus}) =>
  <div className="panel-body">
    <table className="table v-center">
      <thead>
        <tr>
          <th style={{width: colName}}>Name</th>
          <th style={{width: colTrigger}}>Rule Trigger</th>
          <th style={{width: colMessage}}>Message</th>
          <th style={{width: colAlerts}}>Alerts</th>
          <th style={{width: colEnabled}} className="text-center">
            Enabled
          </th>
          <th style={{width: colActions}} />
        </tr>
      </thead>
      <tbody>
        {_.sortBy(rules, r => r.name.toLowerCase()).map(rule => {
          return (
            <RuleRow
              key={rule.id}
              rule={rule}
              source={source}
              onDelete={onDelete}
              onChangeRuleStatus={onChangeRuleStatus}
            />
          )
        })}
      </tbody>
    </table>
  </div>

const handleDelete = (rule, onDelete) => onDelete(rule)

const RuleRow = ({rule, source, onDelete, onChangeRuleStatus}) =>
  <tr key={rule.id}>
    <td style={{width: colName}} className="monotype">
      <RuleTitle rule={rule} source={source} />
    </td>
    <td style={{width: colTrigger}} className="monotype">
      {rule.trigger}
    </td>
    <td className="monotype">
      <span
        className="table-cell-nowrap"
        style={{display: 'inline-block', maxWidth: colMessage}}
      >
        {rule.message}
      </span>
    </td>
    <td style={{width: colAlerts}} className="monotype">
      {rule.alerts.join(', ')}
    </td>
    <td style={{width: colEnabled}} className="monotype text-center">
      <div className="dark-checkbox">
        <Authorized requiredRole={EDITOR_ROLE} propsOverride={{disabled: true}}>
          <input
            id={`kapacitor-enabled ${rule.id}`}
            className="form-control-static"
            type="checkbox"
            defaultChecked={rule.status === 'enabled'}
            onClick={onChangeRuleStatus(rule)}
          />
        </Authorized>
        <label htmlFor={`kapacitor-enabled ${rule.id}`} />
      </div>
    </td>
    <td style={{width: colActions}} className="text-right table-cell-nowrap">
      <Authorized requiredRole={EDITOR_ROLE}>
        <Link
          className="btn btn-info btn-xs"
          to={`/sources/${source.id}/tickscript/${rule.id}`}
        >
          Edit TICKscript
        </Link>
      </Authorized>
      <Authorized requiredRole={EDITOR_ROLE}>
        <button
          className="btn btn-danger btn-xs"
          onClick={handleDelete(rule, onDelete)}
        >
          Delete
        </button>
      </Authorized>
    </td>
  </tr>

const RuleTitle = ({rule: {id, name, query}, source}) => {
  // no queryConfig means the rule was manually created outside of Chronograf
  if (!query) {
    return (
      <i>
        {name}
      </i>
    )
  }

  return (
    <Authorized
      requiredRole={EDITOR_ROLE}
      replaceWith={
        <span>
          {name}
        </span>
      }
    >
      <Link to={`/sources/${source.id}/alert-rules/${id}`}>
        {name}
      </Link>
    </Authorized>
  )
}

const {arrayOf, func, shape, string} = PropTypes

KapacitorRulesTable.propTypes = {
  rules: arrayOf(shape()),
  onChangeRuleStatus: func,
  onDelete: func,
  source: shape({
    id: string.isRequired,
  }).isRequired,
}

RuleRow.propTypes = {
  rule: shape(),
  source: shape(),
  onChangeRuleStatus: func,
  onDelete: func,
}

RuleTitle.propTypes = {
  rule: shape({
    name: string.isRequired,
    query: shape(),
    links: shape({
      self: string.isRequired,
    }),
  }),
  source: shape({
    id: string.isRequired,
  }).isRequired,
}

export default KapacitorRulesTable

@@ -2034,91 +2034,8 @@
 x%22%3E%0A
-        %3CAuthorized requiredRole=%7BEDITOR_ROLE%7D propsOverride=%7B%7Bdisabled: true%7D%7D%3E%0A  
     
@@ -2045,18 +2045,16 @@
  %3Cinput%0A
-  
         
@@ -2093,34 +2093,32 @@
 id%7D%60%7D%0A          
-  
 className=%22form-
@@ -2143,18 +2143,16 @@
         
- 
- 
 type=%22ch
@@ -2159,18 +2159,16 @@
 eckbox%22%0A
-  
         
@@ -2214,34 +2214,32 @@
 led'%7D%0A          
- 
- 
 onClick=%7BonChang
@@ -2269,33 +2269,9 @@
     
-  /%3E%0A        %3C/Authorized
+/
 %3E%0A  

Revert "Disable rule Enabled toggle in TaskTable based on user authorization"