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

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 SidebarHeading from '../../atoms/headings/SidebarHeading';
import CompHeading from '../../atoms/headings/CompHeading';
import Paragraph from '../../atoms/text/Paragraph';
import Link from '../../molecules/Link';
import GeneralTeaser from '../GeneralTeaser';

import './style.css';

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 = classNames({
      'ma__teaser-listing__featured-items': true,
      stacked: teaser.stacked,
      'side-by-side': !teaser.stacked
    });
    var columnCount = teaser.contained && teaser.gridTwoColumns ? 2 : 3;
    var itemsClasses = classNames({
      '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 React.createElement(
      'section',
      { className: 'ma__teaser-listing' },
      React.createElement(
        'div',
        { className: 'ma__teaser-listing__container' },
        teaser.compHeading && React.createElement(CompHeading, teaser.compHeading),
        teaser.sidebarHeading && React.createElement(SidebarHeading, teaser.sidebarHeading),
        teaser.description && React.createElement(
          'div',
          { className: 'ma__teaser-listing__description' },
          React.createElement(Paragraph, teaser.description)
        ),
        teaser.featuredItems && React.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 React.createElement(GeneralTeaser, teaserProps);
          })
        ),
        invisibleItems.length > 0 && React.createElement(
          React.Fragment,
          null,
          React.createElement(
            'ul',
            { className: itemsClasses },
            shownItems.map(function (item, index) {
              var key = 'teaser-listing--item-' + index;
              return React.createElement(
                'li',
                { className: 'ma__teaser-listing__item', key: key },
                React.createElement(GeneralTeaser, _extends({ level: teaserHeading }, item))
              );
            })
          ),
          React.createElement(
            Collapse,
            { 'in': this.state.open, dimension: 'height' },
            React.createElement(
              'div',
              { className: 'ma__teaser-listing__extra' },
              React.createElement(
                'ul',
                { className: itemsClasses },
                invisibleItems.map(function (item, index) {
                  var key = 'hidden-teaser-listing--item-' + index;
                  return React.createElement(
                    'li',
                    { className: 'ma__teaser-listing__item', key: key },
                    React.createElement(GeneralTeaser, _extends({ level: teaserHeading }, item))
                  );
                })
              )
            )
          ),
          React.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 ? React.createElement(
              'span',
              { className: 'less' },
              teaser.lessLabel
            ) : React.createElement(
              'span',
              { className: 'more' },
              teaser.moreLabel
            )
          )
        ),
        invisibleItems.length === 0 && React.createElement(
          'ul',
          { className: itemsClasses },
          teaser.items.map(function (item, index) {
            var key = 'teaser-listing--item-' + index;
            return React.createElement(
              'li',
              { key: key, className: 'ma__teaser-listing__item' },
              React.createElement(GeneralTeaser, item)
            );
          })
        ),
        teaser.more && React.createElement(
          'div',
          { className: 'ma__teaser-listing__more' },
          React.createElement(Link, teaser.more)
        )
      )
    );
  };

  return TeaserListing;
}(React.Component);

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

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

export default TeaserListing;