
import React from 'react'
import classnames from 'classnames'
import {Icon, Select} from '../../'

const Left = 'left'
const Right = 'right'
const Ascending = 'ascending'
const Descending = 'descending'

const Arrow = ({sorted}) => (
  <Icon.ArrowUpward
    width={16}
    height={16}
    className={classnames('Table-head-row-cell-sorter-arrow', {
      'Table-head-row-cell-sorter-arrow--descending': sorted === Descending,
      'Table-head-row-cell-sorter-arrow--ascending': sorted === Ascending
    })}
  />
)

const Table = (props) => (
  <div>
    <table className='Table'>
      <thead className='Table-head'>
        <tr className='Table-head-row'>
          {props.head.map((cell, i) => (
            <th
              key={i}
              className={classnames('Table-head-row-cell', {
                'Table-head-row-cell--align-left': cell.align === Left,
                // default case when no alignment is given
                'Table-head-row-cell--align-right': !cell.align
              })}
            >
              { cell.sorted
                ? <div className='Table-head-row-cell-sorter' onClick={() => props.onSortClick(i)}>
                  <Arrow sorted={cell.sorted} />{cell.text || cell}
                </div>
                : cell.text || cell
              }
            </th>
          ))}
        </tr>
      </thead>
      <tbody className='Table-body'>
        {props.body.map((row, i) => (
          <tr key={i} className='Table-body-row'>
            {row.map((cell, j) => (
              <td key={j} className={classnames('Table-body-row-cell', {
                'Table-body-row-cell--align-left': cell.align === Left,
                // default case when no alignment is given
                'Table-body-row-cell--align-right': !cell.align
              })}>
                {cell.text || cell}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
    {props.footer ? (
      <div className='Table-footer'>
        <span className='Table-footer-rowsPerPage'>
          {props.footer.labelRowsPerPage}
        </span>
        <Select
          items={props.footer.possibleRowsPerPage}
          onChange={props.footer.onChangeRowsPerPage}
          selectedIndex={props.footer.rowsPerPageIndex}
        />
        <span className='Table-footer-xOfY'>
          {props.footer.labelXOfY}
        </span>
        <Icon.Button onClick={props.footer.onPaginateLeft}>
          <Icon.ChevronLeft fill='rgba(0, 0, 0, 0.54)' />
        </Icon.Button>
        <Icon.Button onClick={props.footer.onPaginateRight}>
          <Icon.ChevronRight fill='rgba(0, 0, 0, 0.54)' />
        </Icon.Button>
      </div>
    ) : null}
  </div>
)

Table.Align = {Left, Right}
Table.Sort = {Ascending, Descending}

export default Table

@@ -525,21 +525,54 @@
 able = (
-props
+%7Bhead = %5B%5D, onSortClick, body, footer%7D
 ) =%3E (%0A 
@@ -696,22 +696,16 @@
        %7B
-props.
 head.map
@@ -1151,22 +1151,16 @@
 =%7B() =%3E 
-props.
 onSortCl
@@ -1418,22 +1418,16 @@
        %7B
-props.
 body.map
@@ -1943,30 +1943,24 @@
 table%3E%0A    %7B
-props.
 footer ? (%0A 
@@ -2050,38 +2050,32 @@
 ge'%3E%0A          %7B
-props.
 footer.labelRows
@@ -2132,22 +2132,16 @@
  items=%7B
-props.
 footer.p
@@ -2180,22 +2180,16 @@
 Change=%7B
-props.
 footer.o
@@ -2233,22 +2233,16 @@
 dIndex=%7B
-props.
 footer.r
@@ -2325,22 +2325,16 @@
        %7B
-props.
 footer.l
@@ -2381,38 +2381,32 @@
 Button onClick=%7B
-props.
 footer.onPaginat
@@ -2528,14 +2528,8 @@
 ck=%7B
-props.
 foot

use empty array as default value for table header