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, { Component } from 'react';
import PropTypes from 'prop-types';
import { ButtonWithIcon, Icon } from '../../../../index';

var TeaserOrgs = function (_Component) {
  _inherits(TeaserOrgs, _Component);

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

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    var orgs = props.orgs;

    var allOrgs = orgs.split(',');
    _this.state = {
      shouldTruncate: allOrgs.length > 3,
      truncateOrgs: allOrgs.length > 3,
      showAll: false
    };
    _this.handleClick = _this.handleClick.bind(_this);
    _this.handleKeyPress = _this.handleKeyPress.bind(_this);
    return _this;
  }

  TeaserOrgs.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var orgs = nextProps.orgs;

    var allOrgs = orgs.split(',');
    this.setState({ shouldTruncate: allOrgs.length > 3, truncateOrgs: allOrgs.length > 3, showAll: false });
  };

  TeaserOrgs.prototype.handleClick = function handleClick() {
    this.setState(function (prevState) {
      return { showAll: !prevState.showAll, truncateOrgs: !prevState.truncateOrgs };
    });
  };

  TeaserOrgs.prototype.handleKeyPress = function handleKeyPress(e) {
    if (e.key === 'Enter') {
      this.setState(function (prevState) {
        return { showAll: !prevState.showAll, truncateOrgs: !prevState.truncateOrgs };
      });
    }
  };

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

    var orgs = this.props.orgs;

    var teaserOrgs = orgs.split(',');
    if (!this.state.shouldTruncate) {
      return React.createElement(
        'span',
        { className: 'ma__gen-teaser__org' },
        teaserOrgs.join(', ')
      );
    }
    var shownOrgs = teaserOrgs.slice(0, 3);
    var hiddenOrgs = teaserOrgs.slice(3);
    var toggleProps = {
      classes: ['ma__gen-teaser__org__show-more', '' + (!this.state.truncateOrgs ? 'show-fewer' : '')],
      onClick: function onClick(e) {
        return _this2.handleClick(e);
      },
      onKeyPress: function onKeyPress(e) {
        return _this2.handleKeyPress(e);
      },
      text: this.state.truncateOrgs ? ' & ' + hiddenOrgs.length + ' more' : ' Show fewer',
      theme: 'c-primary',
      usage: 'quaternary-simple',
      capitalized: true,
      expanded: this.state.showAll,
      icon: React.createElement(Icon, { name: 'chevron', svgWidth: 16, svgHeight: '16' })
    };
    var toggle = React.createElement(ButtonWithIcon, toggleProps);
    var displayedOrgs = this.state.showAll ? teaserOrgs.join(', ') : shownOrgs.join(', ');
    return React.createElement(
      'span',
      { className: 'ma__gen-teaser__org' },
      displayedOrgs,
      toggle
    );
  };

  return TeaserOrgs;
}(Component);

TeaserOrgs.propTypes = process.env.NODE_ENV !== "production" ? {
  /** A comma seperate list of organizations. */
  orgs: PropTypes.string.isRequired
} : {};

export default TeaserOrgs;