'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _Collapse = require('../../animations/Collapse');

var _Collapse2 = _interopRequireDefault(_Collapse);

var _ButtonWithIcon = require('../../atoms/buttons/ButtonWithIcon');

var _ButtonWithIcon2 = _interopRequireDefault(_ButtonWithIcon);

var _Icon = require('../../base/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

require('./style.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ListingTableItem = function (_React$Component) {
  _inherits(ListingTableItem, _React$Component);

  function ListingTableItem(props) {
    _classCallCheck(this, ListingTableItem);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.handleClick = function () {
      _this.setState({
        open: !_this.state.open
      });
    };

    _this.state = {
      open: false
    };
    return _this;
  }

  ListingTableItem.prototype.render = function render() {
    var _this2 = this;

    var row = this.props.row;

    var visibleItems = row.visibleItems || 2;
    var inlineAccordion = row.items.length > visibleItems;
    var rowClasses = (0, _classnames2.default)({
      'ma__rich-text': true,
      'js-accordion': inlineAccordion
    });
    var shownItems = row.items.slice(0, visibleItems);
    var invisibleItems = inlineAccordion ? row.items.slice(visibleItems) : [];
    return _react2.default.createElement(
      'tr',
      null,
      _react2.default.createElement(
        'th',
        { scope: 'row' },
        row.label
      ),
      _react2.default.createElement(
        'td',
        { className: rowClasses },
        shownItems.map(function (item, index) {
          return (
            /* eslint-disable-next-line react/no-array-index-key */
            _react2.default.createElement(
              'span',
              { key: row.label + '-shown-item-' + index, className: 'ma__listing-table__data-item' },
              item
            )
          );
        }),
        invisibleItems.length > 0 && _react2.default.createElement(
          _Collapse2.default,
          { 'in': this.state.open, dimension: 'height' },
          _react2.default.createElement(
            'div',
            { className: 'ma__listing-table__extra collapsed' },
            invisibleItems.map(function (item, index) {
              return (
                /* eslint-disable-next-line react/no-array-index-key */
                _react2.default.createElement(
                  'span',
                  { key: row.label + '-invisible-item-' + index, className: 'ma__listing-table__data-item' },
                  item
                )
              );
            })
          )
        ),
        inlineAccordion && _react2.default.createElement(
          'div',
          { className: 'ma__listing-table__expand-button' },
          _react2.default.createElement(_ButtonWithIcon2.default, {
            text: this.state.open ? row.lessLabel || 'Less' : row.moreLabel || 'More',
            theme: 'c-primary',
            usage: 'quaternary-simple',
            type: 'button',
            icon: _react2.default.createElement(_Icon2.default, { name: 'chevron', svgHeight: 20, svgWidth: 20 }),
            onClick: function onClick(e) {
              return _this2.handleClick(e);
            },
            expanded: this.state.open,
            capitalized: true
          })
        )
      )
    );
  };

  return ListingTableItem;
}(_react2.default.Component);

ListingTableItem.propTypes = process.env.NODE_ENV !== "production" ? {
  row: _propTypes2.default.shape({
    /** Lable of row. Required */
    label: _propTypes2.default.string.isRequired,
    /** Number of visible items. Defaults to 2. */
    visibleItems: _propTypes2.default.number,
    /** More Label for when items are hidden. Defaults to "More" */
    moreLabel: _propTypes2.default.string,
    /** Less Label for when items need hiding. Defaults to "Less" */
    lessLabel: _propTypes2.default.string,
    /** Items in the table. */
    items: _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]))
  })
} : {};

var ListingTable = function ListingTable(props) {
  var rows = props.rows;
  return _react2.default.createElement(
    'div',
    { className: 'ma__listing-table' },
    _react2.default.createElement(
      'div',
      { className: 'ma__listing-table__container' },
      _react2.default.createElement(
        'table',
        null,
        _react2.default.createElement(
          'tbody',
          null,
          rows.map(function (row, index) {
            return (
              /* eslint-disable-next-line react/no-array-index-key */
              _react2.default.createElement(ListingTableItem, { key: 'listing-table-item-' + index, row: row })
            );
          })
        )
      )
    )
  );
};

ListingTable.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Rows of data. Each containing specific parameters */
  rows: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    /** Lable of row. Required */
    label: _propTypes2.default.string.isRequired,
    /** Number of visible items. Defaults to 2. */
    visibleItems: _propTypes2.default.number,
    /** More Label for when items are hidden. Defaults to "More" */
    moreLabel: _propTypes2.default.string,
    /** Less Label for when items need hiding. Defaults to "Less" */
    lessLabel: _propTypes2.default.string,
    /** Items in the table. */
    items: _propTypes2.default.arrayOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]))
  }))
} : {};

exports.default = ListingTable;
module.exports = exports['default'];