'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 _SidebarHeading = require('../../atoms/headings/SidebarHeading');

var _SidebarHeading2 = _interopRequireDefault(_SidebarHeading);

var _CompHeading = require('../../atoms/headings/CompHeading');

var _CompHeading2 = _interopRequireDefault(_CompHeading);

var _Paragraph = require('../../atoms/text/Paragraph');

var _Paragraph2 = _interopRequireDefault(_Paragraph);

var _Link = require('../../molecules/Link');

var _Link2 = _interopRequireDefault(_Link);

var _GeneralTeaser = require('../GeneralTeaser');

var _GeneralTeaser2 = _interopRequireDefault(_GeneralTeaser);

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 TeaserListing = function (_React$Component) {
  _inherits(TeaserListing, _React$Component);

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

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

    _this.handleClick = function (e) {
      e.preventDefault();
      _this.setState(function (currentState) {
        return {
          open: !currentState.open
        };
      });
    };

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

  TeaserListing.prototype.render = function render() {
    var teaser = this.props;
    var featuredClasses = (0, _classnames2.default)({
      'ma__teaser-listing__featured-items': true,
      stacked: teaser.stacked,
      'side-by-side': !teaser.stacked
    });
    var columnCount = teaser.contained && teaser.gridTwoColumns ? 2 : 3;
    var itemsClasses = (0, _classnames2.default)({
      'ma__teaser-listing__items': true,
      'ma__teaser-listing__2-col-grid': columnCount === 2,
      'ma__teaser-listing__3-col-grid': columnCount === 3
    });
    var shownNumber = teaser.shownItems || null;
    var shownItems = shownNumber ? teaser.items.slice(0, shownNumber) : null;
    var invisibleItems = shownNumber ? teaser.items.slice(shownNumber) : [];

    var teaserHeading = 2;
    teaserHeading = parseInt(teaser.compHeading && teaser.compHeading.level ? teaser.compHeading.level : teaserHeading, 10) + 1;
    teaserHeading = parseInt(teaser.sidebarHeading && teaser.sidebarHeading.level ? teaser.sidebarHeading.level : teaserHeading, 10) + 1;

    return _react2.default.createElement(
      'section',
      { className: 'ma__teaser-listing' },
      _react2.default.createElement(
        'div',
        { className: 'ma__teaser-listing__container' },
        teaser.compHeading && _react2.default.createElement(_CompHeading2.default, teaser.compHeading),
        teaser.sidebarHeading && _react2.default.createElement(_SidebarHeading2.default, teaser.sidebarHeading),
        teaser.description && _react2.default.createElement(
          'div',
          { className: 'ma__teaser-listing__description' },
          _react2.default.createElement(_Paragraph2.default, teaser.description)
        ),
        teaser.featuredItems && _react2.default.createElement(
          'div',
          { className: featuredClasses },
          teaser.featuredItems.map(function (item, index) {
            var key = 'featured-listing--item-' + index;
            var teaserProps = _extends({
              key: key,
              level: teaserHeading
            }, item);
            return _react2.default.createElement(_GeneralTeaser2.default, teaserProps);
          })
        ),
        invisibleItems.length > 0 && _react2.default.createElement(
          _react2.default.Fragment,
          null,
          _react2.default.createElement(
            'ul',
            { className: itemsClasses },
            shownItems.map(function (item, index) {
              var key = 'teaser-listing--item-' + index;
              return _react2.default.createElement(
                'li',
                { className: 'ma__teaser-listing__item', key: key },
                _react2.default.createElement(_GeneralTeaser2.default, _extends({ level: teaserHeading }, item))
              );
            })
          ),
          _react2.default.createElement(
            _Collapse2.default,
            { 'in': this.state.open, dimension: 'height' },
            _react2.default.createElement(
              'div',
              { className: 'ma__teaser-listing__extra' },
              _react2.default.createElement(
                'ul',
                { className: itemsClasses },
                invisibleItems.map(function (item, index) {
                  var key = 'hidden-teaser-listing--item-' + index;
                  return _react2.default.createElement(
                    'li',
                    { className: 'ma__teaser-listing__item', key: key },
                    _react2.default.createElement(_GeneralTeaser2.default, _extends({ level: teaserHeading }, item))
                  );
                })
              )
            )
          ),
          _react2.default.createElement(
            'button',
            {
              className: 'ma__content-link ma__content-link--chevron ma__content-link__acordion-toggle js-accordion-link',
              'aria-label': this.state.open ? teaser.lessLabel : teaser.moreLabel,
              onClick: this.handleClick
            },
            this.state.open ? _react2.default.createElement(
              'span',
              { className: 'less' },
              teaser.lessLabel
            ) : _react2.default.createElement(
              'span',
              { className: 'more' },
              teaser.moreLabel
            )
          )
        ),
        invisibleItems.length === 0 && _react2.default.createElement(
          'ul',
          { className: itemsClasses },
          teaser.items.map(function (item, index) {
            var key = 'teaser-listing--item-' + index;
            return _react2.default.createElement(
              'li',
              { key: key, className: 'ma__teaser-listing__item' },
              _react2.default.createElement(_GeneralTeaser2.default, item)
            );
          })
        ),
        teaser.more && _react2.default.createElement(
          'div',
          { className: 'ma__teaser-listing__more' },
          _react2.default.createElement(_Link2.default, teaser.more)
        )
      )
    );
  };

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

TeaserListing.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Optional CompHeading component */
  compHeading: _propTypes2.default.shape(_CompHeading2.default.propTypes),
  /** Optional SidebarHeading component */
  sidebarHeading: _propTypes2.default.shape(_SidebarHeading2.default.propTypes),
  /** Descriptive paragraph */
  description: _propTypes2.default.shape({
    text: _propTypes2.default.string
  }),
  /** Stacked if true, side-by-side if false. */
  stacked: _propTypes2.default.bool,
  /** Grid display of secondary items or three column grid. */
  contained: _propTypes2.default.bool,
  /** Set for an alternative two column layout for large screens. (Both display the same at smaller screen widths) */
  gridTwoColumns: _propTypes2.default.bool,
  /** Number of items to show. If set, Collapse is used to make an accordion. */
  shownItems: _propTypes2.default.number,
  /** Accordion Label */
  moreLabel: _propTypes2.default.string,
  /** Items Label */
  lessLabel: _propTypes2.default.string,
  /** Array of Featured GeneralTeaser Components. */
  featuredItems: _propTypes2.default.arrayOf(_propTypes2.default.shape(_GeneralTeaser2.default.propTypes)),
  /** Array of GeneralTeaser Componets */
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape(_GeneralTeaser2.default.propTypes)),
  /** Optional Link for more. */
  more: _propTypes2.default.shape(_Link2.default.propTypes)
} : {};

TeaserListing.defaultProps = {
  stacked: false,
  contained: true,
  gridTwoColumns: true,
  moreLabel: 'More',
  lessLabel: 'Less',
  items: []
};

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