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; }

import React from 'react';
import PropTypes from 'prop-types';
import ClassNames from 'classnames';

import Collapse from '../../animations/Collapse';
import ButtonWithIcon from '../../atoms/buttons/ButtonWithIcon';
import Icon from '../../base/Icon';

import './style.css';

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

  return ListingTableItem;
}(React.Component);

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

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

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

export default ListingTable;