// TODO generalize sort tables to accept arbitrary columns and attributes
// (combine aa-table-index.js and aa-table-vromms.js into single component)

import React from 'react';
import _ from 'lodash';
import classnames from 'classnames';
import { t } from '../utils/i18n';

const displayHeader = [
  {key: 'id', value: 'VProMMS ID'},
  {key: 'inTheDatabase', value: 'Status'},
  {key: 'RouteShoot', value: 'RouteShoot'},
  {key: 'RoadLab', value: 'RoadLabPro'}
];

const AATable = React.createClass({
  displayName: 'AATable',

  propTypes: {
    data: React.PropTypes.array
  },

  getInitialState: function () {
    return {
      sortState: {
        field: 'inTheDatabase',
        order: 'desc'
      }
    };
  },

  renderTableHead: function () {
    return (
      <thead>
        <tr>
          {_.map(displayHeader, (d) => {
            let c = classnames('collecticons', {
              'collecticons-sort-none': this.state.sortState.field !== d.key,
              'collecticons-sort-asc': this.state.sortState.field === d.key && this.state.sortState.order === 'asc',
              'collecticons-sort-desc': this.state.sortState.field === d.key && this.state.sortState.order === 'desc'
            });
            return (
              <th key={d.key} onClick={this.sortLinkClickHandler.bind(null, d.key)}>
                <i className={c}></i>
                <span>{t(d.value)}</span>
              </th>
            );
          })}
          <th className='table-properties-head'>Properties</th>
        </tr>
      </thead>
    );
  },

  sortLinkClickHandler: function (field, e) {
    e.preventDefault();
    let {field: sortField, order: sortOrder} = this.state.sortState;
    let order = 'asc';
    // Same field, switch order; different field, reset order.
    if (sortField === field) {
      order = sortOrder === 'asc' ? 'desc' : 'asc';
    }

    this.setState({
      sortState: {
        field,
        order
      }
    });
  },

  handleSort: function () {
    let sorted = _(this.props.data).sortBy(this.state.sortState.field);
    if (this.state.sortState.order === 'desc') {
      sorted = sorted.reverse();
    }
    return sorted.value();
  },

  renderTableBody: function () {
    const sorted = this.handleSort(this.props.data);
    return (
      <tbody>
        {_.map(sorted, (vpromm, i) => {
          return (
            <tr key={`vpromm-${vpromm.id}`} className={classnames({'alt': i % 2})}>
              <th>{vpromm.id}</th>
              <td className={classnames({'added': vpromm.inTheDatabase, 'not-added': !vpromm.inTheDatabase})}>{vpromm.inTheDatabase ? t('added') : t('not added')}</td>
              <td className={classnames({'added': vpromm.RouteShoot, 'not-added': !vpromm.RouteShoot})}>{vpromm.RouteShoot ? <a href={vpromm.RouteShootUrl}>link</a> : ''}</td>
              <td className={classnames({'added': vpromm.RoadLabPro, 'not-added': !vpromm.RoadLabPro})}>{vpromm.RoadLabPro ? t('added') : t('not added')}</td>
              <td>
                <button type='button' className='bttn-table-expand bttn-table-expand--show'><span>Show</span></button>
                <div className='table-properties table-properties--hidden'>
                  <dl>
                    <dt>Key</dt>
                    <dd>Value</dd>
                  </dl>
                </div>
              </td>
            </tr>
          );
        })}
      </tbody>
    );
  },

  render: function () {
    return (
      <div className='table'>
        <table>
          {this.renderTableHead()}
          {this.renderTableBody()}
        </table>
      </div>
    );
  }
});

export default AATable;

@@ -689,24 +689,50 @@
 rder: 'desc'
+,%0A        expandedId: null
 %0A      %7D%0A   
@@ -2206,158 +2206,812 @@
 %0A%0A  
-renderTableBody: function () %7B%0A    const sorted = this.handleSort(this.props.data);%0A    return (%0A      %3Ctbody%3E%0A        %7B_.map(sorted, (vpromm, i) =%3E %7B
+onPropertiesClick: function (vprommId) %7B%0A    let curId = this.state.expandedId;%0A    let newId = curId === vprommId ? null : vprommId;%0A%0A    this.setState(%7BexpandedId: newId%7D);%0A  %7D,%0A%0A  renderTableBody: function () %7B%0A    const sorted = this.handleSort(this.props.data);%0A    return (%0A      %3Ctbody%3E%0A        %7B_.map(sorted, (vpromm, i) =%3E %7B%0A          let propBtnLabel = this.state.expandedId === vpromm.id ? 'Hide' : 'Show';%0A          let propBtnClass = classnames('bttn-table-expand', %7B%0A            'bttn-table-expand--show': this.state.expandedId !== vpromm.id,%0A            'bttn-table-expand--hide': this.state.expandedId === vpromm.id%0A          %7D);%0A          let propContainerClass = classnames('table-properties', %7B%0A            'table-properties--hidden': this.state.expandedId !== vpromm.id%0A          %7D);%0A
 %0A   
@@ -3719,62 +3719,98 @@
 ame=
-'bttn-table-expand bttn-table-expand--show'%3E%3Cspan%3EShow
+%7BpropBtnClass%7D onClick=%7Bthis.onPropertiesClick.bind(null, vpromm.id)%7D%3E%3Cspan%3E%7BpropBtnLabel%7D
 %3C/sp
@@ -3857,51 +3857,28 @@
 ame=
-'table-properties table-properties--hidden'
+%7BpropContainerClass%7D
 %3E%0A  

Implement properties toggle