'use strict';

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _index = require('../../../index');

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

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

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

    _this.getCardContent = function (mobile) {
      var _this$props = _this.props,
          description = _this$props.description,
          index = _this$props.index,
          title = _this$props.title,
          children = _this$props.children,
          seeAll = _this$props.seeAll;

      return _react2.default.createElement(
        _react2.default.Fragment,
        null,
        _react2.default.createElement(
          'nav',
          { className: mobile ? 'ma__section-links__toggle-content-mobile' : 'ma__section-links__toggle-content', 'aria-labelledby': mobile ? null : 'sectionCard' + index, id: mobile ? null : 'sectionCardContent' + index },
          description && _react2.default.createElement(
            'p',
            { className: 'ma__section-links__description' },
            description
          ),
          _react2.default.createElement(
            'div',
            { className: 'ma__section-links__mobile-title' },
            title.href && title.href.length > 0 && _react2.default.createElement(
              'div',
              { className: 'ma__section-links__mobile-title' },
              _react2.default.createElement(_index.DecorativeLink, { href: title.href, text: 'Learn More', info: 'learn more about ' + title.text })
            )
          ),
          _react2.default.createElement(
            'ul',
            { className: 'ma__section-links__items' },

            // eslint-disable-next-line react/prop-types
            children && children.map(function (child, i) {
              return (
                // eslint-disable-next-line react/no-array-index-key
                _react2.default.createElement(
                  'li',
                  { className: 'ma__section-links__item', key: 'sectionCard' + index + '.Link' + i },
                  child
                )
              );
            })
          )
        ),
        seeAll && _react2.default.createElement(
          'div',
          { className: 'ma__section-links__footer' },
          _react2.default.createElement(_index.DecorativeLink, { href: seeAll.href, text: seeAll.text })
        )
      );
    };

    _this.handleClick = function (e) {
      e.preventDefault();
      var expanded = _this.state.expanded;

      _this.setState({ expanded: !expanded });
    };

    _this.updateWindowDimensions = _this.updateWindowDimensions.bind(_this);
    _this.state = {
      width: 1200,
      expanded: false
    };
    return _this;
  }

  SectionCard.prototype.componentDidMount = function componentDidMount() {
    this.updateWindowDimensions();
    // eslint-disable-next-line no-undef
    window.addEventListener('resize', this.updateWindowDimensions);
  };

  SectionCard.prototype.componentWillUnmount = function componentWillUnmount() {
    // eslint-disable-next-line no-undef
    window.removeEventListener('resize', this.updateWindowDimensions);
  };

  SectionCard.prototype.updateWindowDimensions = function updateWindowDimensions() {
    // eslint-disable-next-line no-undef
    this.setState({ width: window.innerWidth });
  };

  SectionCard.prototype.render = function render() {
    var _state = this.state,
        expanded = _state.expanded,
        width = _state.width;
    var _props = this.props,
        index = _props.index,
        title = _props.title;

    var accordionClasses = expanded ? 'is-open' : 'is-closed';
    if (width > 481) {
      return _react2.default.createElement(
        'section',
        { className: 'ma__section-links' },
        _react2.default.createElement(
          'div',
          { className: 'ma__section-links__content' },
          _react2.default.createElement(
            'h2',
            { className: 'ma__section-links__title', id: 'sectionCard' + index },
            title.href && title.href.length > 0 ? _react2.default.createElement(_index.DecorativeLink, { href: title.href, text: title.text }) : title.text
          ),
          this.getCardContent(false)
        )
      );
    }
    return _react2.default.createElement(
      'section',
      { className: 'ma__section-links ' + accordionClasses },
      _react2.default.createElement(
        _index.AccordionItem,
        { title: title.text, emphasize: false, icon: null, id: 'sectionCard' + index },
        this.getCardContent(true)
      )
    );
  };

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

SectionCard.propTypes = process.env.NODE_ENV !== "production" ? {
  // The title of the card, it can be a link or just a heading text.
  // If title is a link (has href), the link will be rendered as a "Learn More" link on mobile below the title and description.
  title: _propTypes2.default.shape({
    // If href is provided, the card title will render as a decorative link. Otherwise it will render as a heading text
    href: _propTypes2.default.string,
    text: _propTypes2.default.string.isRequired
  }),
  // An optional decorative link rendered at the bottom of the card on desktop. This is usually used to link to a landing page for the category.
  seeAll: _propTypes2.default.shape({
    href: _propTypes2.default.string,
    text: _propTypes2.default.string
  }),
  // An optional description of the card rendered below the card title.
  description: _propTypes2.default.string,
  // A unique number index of the card used for setting key and id
  index: _propTypes2.default.number,
  // An array of child components to render as links inside of the card. Currently the options passed into the card from budget homepages are either CalloutLinks or DecorativeLinks.
  children: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object])
} : {};

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