import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './style.css';

var Table = function Table(table) {
  var tableWideClass = '';
  var tableHeaderRow = [];
  if (table.head && table.head.rows) {
    tableHeaderRow = table.head.rows[table.head.rows.length - 1];
    if (tableHeaderRow.cells.length > 3) {
      tableWideClass = ' ma__table--wide';
    }
  }
  return React.createElement(
    'table',
    { id: table.id, className: 'ma__table' + tableWideClass },
    table.head && table.head.rows && React.createElement(
      'thead',
      null,
      table.head.rows.map(function (row, rowIndex) {
        return React.createElement(
          'tr',
          { key: row.key || 'thead-row' + rowIndex },
          row.cells.map(function (cell, cellIndex) {
            return React.createElement(
              'th',
              {
                key: cell.key || 'thead-row' + rowIndex + '-cell' + cellIndex,
                scope: 'col',
                colSpan: cell.colspan || null,
                rowSpan: cell.rowspan || null
              },
              cell.text
            );
          })
        );
      })
    ),
    table.bodies.map(function (body, bodyIndex) {
      return React.createElement(
        'tbody',
        { key: body.key || 'tbody' + bodyIndex },
        body.rows.map(function (row, rowIndex) {
          var tableIndexOffset = row.rowSpanOffset ? 0 : 1;
          var defaultRowKey = 'tbody' + bodyIndex + '-row' + rowIndex;
          return React.createElement(
            'tr',
            { key: row.key || defaultRowKey, className: row.rowSpanOffset ? 'is-offset' : null },
            row.cells.map(function (cell, cellIndex) {
              var dataLabel = null;
              var headerCellIndex = cellIndex + 1 - tableIndexOffset;
              if (tableHeaderRow.cells && tableHeaderRow.cells.length > 0 && headerCellIndex > 0) {
                // Mayflower twig loops started at 1 - add one to index.
                dataLabel = tableHeaderRow.cells[headerCellIndex] ? tableHeaderRow.cells[headerCellIndex].text : '';
              }
              var defaultCellKey = defaultRowKey + '-cell' + cellIndex;
              var cellClasses = classnames({
                'ma__table-cell': true,
                'no-left-pad': !row.rowSpanOffset && !cell.heading && cellIndex === 1
              });
              return cell.heading ? React.createElement(
                'th',
                {
                  className: cellClasses,
                  key: cell.key || defaultCellKey,
                  'data-label': dataLabel,
                  scope: 'row',
                  colSpan: cell.colspan || null,
                  rowSpan: cell.rowspan || null
                },
                cell.text
              ) : React.createElement(
                'td',
                {
                  className: cellClasses,
                  key: cell.key || defaultCellKey,
                  'data-label': dataLabel,
                  colSpan: cell.colspan || null,
                  rowSpan: cell.rowspan || null
                },
                cell.text
              );
            })
          );
        })
      );
    })
  );
};

Table.propTypes = process.env.NODE_ENV !== "production" ? {
  id: PropTypes.string,
  head: PropTypes.shape({
    rows: PropTypes.arrayOf(PropTypes.shape({
      rowSpanOffset: PropTypes.bool,
      cells: PropTypes.arrayOf(PropTypes.shape({
        heading: PropTypes.bool.isRequired,
        colspan: PropTypes.string,
        rowspan: PropTypes.string,
        text: PropTypes.string.isRequired,
        // Optional key for cell in case the table is dynamic.
        key: PropTypes.string
      })),
      // Optional key for row in case the table is dynamic.
      key: PropTypes.string
    }))
  }),
  bodies: PropTypes.arrayOf(PropTypes.shape({
    rows: PropTypes.arrayOf(PropTypes.shape({
      // If true, padding-left is set to zero on the first th/td.
      rowSpanOffset: PropTypes.bool,
      cells: PropTypes.arrayOf(PropTypes.shape({
        heading: PropTypes.bool.isRequired,
        colspan: PropTypes.string,
        rowspan: PropTypes.string,
        text: PropTypes.string.isRequired,
        // Optional key for cell in case the table is dynamic.
        key: PropTypes.string
      })),
      // Optional key for row in case the table is dynamic.
      key: PropTypes.string
    })),
    key: PropTypes.string
  }))
} : {};

Table.defaultProps = {};

export default Table;