(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports', 'react', 'classnames', '../BaseComponent', '../../iron/IronCollapse', '../../../styles/flex', 'styled-components', '../IconSet/Icon'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require('react'), require('classnames'), require('../BaseComponent'), require('../../iron/IronCollapse'), require('../../../styles/flex'), require('styled-components'), require('../IconSet/Icon'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global.react, global.classnames, global.BaseComponent, global.IronCollapse, global.flex, global.styledComponents, global.Icon);
    global.index = mod.exports;
  }
})(this, function (exports, _react, _classnames, _BaseComponent, _IronCollapse, _flex, _styledComponents, _Icon) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  var _react2 = _interopRequireDefault(_react);

  var _classnames2 = _interopRequireDefault(_classnames);

  var _BaseComponent2 = _interopRequireDefault(_BaseComponent);

  var _IronCollapse2 = _interopRequireDefault(_IronCollapse);

  var _flex2 = _interopRequireDefault(_flex);

  var _styledComponents2 = _interopRequireDefault(_styledComponents);

  var _Icon2 = _interopRequireDefault(_Icon);

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

  var _createClass = function () {
    function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor);
      }
    }

    return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
    };
  }();

  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 _templateObject = _taggedTemplateLiteral(['\n  font-family: "GE Inspira Sans";\n  padding: .5rem;\n  margin-bottom   : 0.3333rem;\n  cursor          : pointer;\n  user-select     : none;\n  \n  background-color: var(--px-accordion-header-background-color, white);\n  color           : var(--px-accordion-header-color, black);\n  \n  color: var(--px-headings-heading-subsection-color);\n  background-color: var(--px-headings-heading-subsection-background);\n  \n  display         : flex;\n  justify-content : space-between;\n  > * {\n    user-select   : none;\n  }\n\n  ', '\n'], ['\n  font-family: "GE Inspira Sans";\n  padding: .5rem;\n  margin-bottom   : 0.3333rem;\n  cursor          : pointer;\n  user-select     : none;\n  \n  background-color: var(--px-accordion-header-background-color, white);\n  color           : var(--px-accordion-header-color, black);\n  \n  color: var(--px-headings-heading-subsection-color);\n  background-color: var(--px-headings-heading-subsection-background);\n  \n  display         : flex;\n  justify-content : space-between;\n  > * {\n    user-select   : none;\n  }\n\n  ', '\n']),
      _templateObject2 = _taggedTemplateLiteral(['\n    cursor:not-allowed;\n    pointerEvents: none;\n  '], ['\n    cursor:not-allowed;\n    pointerEvents: none;\n  ']),
      _templateObject3 = _taggedTemplateLiteral(['\n  text-transform:uppercase;\n  margin-left: .2rem;\n'], ['\n  text-transform:uppercase;\n  margin-left: .2rem;\n']),
      _templateObject4 = _taggedTemplateLiteral(['\n  display: flex;\n  flex-direction: column;\n'], ['\n  display: flex;\n  flex-direction: column;\n']),
      _templateObject5 = _taggedTemplateLiteral(['\n  margin  : 0;\n  overflow: auto;\n  padding: .5rem;\n'], ['\n  margin  : 0;\n  overflow: auto;\n  padding: .5rem;\n']),
      _templateObject6 = _taggedTemplateLiteral(['\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width : 1rem;\n  height: 1rem;\n'], ['\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width : 1rem;\n  height: 1rem;\n']),
      _templateObject7 = _taggedTemplateLiteral(['\n  margin-right  : 1rem;\n  text-transform: none;\n'], ['\n  margin-right  : 1rem;\n  text-transform: none;\n']),
      _templateObject8 = _taggedTemplateLiteral(['\n  cursor: pointer;\n  color: var(--px-actionable-alt-text-color, blue);\n  background: transparent;\n  border: transparent;\n  outline: none;\n  --iron-icon-width: 1rem;\n  --iron-icon-height: 1rem;\n'], ['\n  cursor: pointer;\n  color: var(--px-actionable-alt-text-color, blue);\n  background: transparent;\n  border: transparent;\n  outline: none;\n  --iron-icon-width: 1rem;\n  --iron-icon-height: 1rem;\n']);

  function _taggedTemplateLiteral(strings, raw) {
    return Object.freeze(Object.defineProperties(strings, {
      raw: {
        value: Object.freeze(raw)
      }
    }));
  }

  var styles = {
    width: '16px',
    height: '16px'
  };
  var svgStyles = {
    pointerEvents: 'none',
    display: 'block',
    height: '100%',
    width: '100%'
  };
  var CloseIcon = function CloseIcon() {
    return _react2.default.createElement(
      'i',
      { className: 'px-icon px-icon-utl px-utl-chevron', style: styles },
      _react2.default.createElement(
        'svg',
        { viewBox: '0 0 16 16', preserveAspectRatio: 'xMidYMid meet', style: svgStyles },
        _react2.default.createElement(
          'g',
          { id: 'px-utl-chevron-right' },
          _react2.default.createElement('path', { strokeLinejoin: 'round', d: 'M6.2 13.2l5.4-5.5-5.5-5.5' })
        )
      )
    );
  };
  var OpenIcon = function OpenIcon() {
    return _react2.default.createElement(
      'i',
      { className: 'px-icon px-icon-utl px-utl-chevron-down', style: styles },
      _react2.default.createElement(
        'svg',
        { viewBox: '0 0 16 16', preserveAspectRatio: 'xMidYMid meet', style: svgStyles },
        _react2.default.createElement(
          'g',
          { id: 'px-utl-chevron' },
          _react2.default.createElement('path', { d: 'M2.4 6.2l5.5 5.5 5.5-5.5' })
        )
      )
    );
  };

  var AccordionHeader = _styledComponents2.default.div(_templateObject, function (props) {
    return props.disabled && (0, _styledComponents.css)(_templateObject2);
  });
  AccordionHeader.displayName = 'AccordionHeader';
  AccordionHeader.defaultProps = {
    className: 'px-accordion__header'
  };

  var AccordionHeaderText = _styledComponents2.default.span(_templateObject3);
  AccordionHeaderText.displayName = 'AccordionHeaderText';

  var AccordionContainer = _styledComponents2.default.div(_templateObject4);
  AccordionContainer.displayName = 'AccordionContainer';
  AccordionContainer.defaultProps = {
    className: 'px-accordion__container'
  };

  var AccordionSection = _styledComponents2.default.div(_templateObject4);
  AccordionSection.displayName = 'AccordionSection';
  AccordionSection.defaultProps = {
    className: 'px-accordion__section'
  };

  var AccordionBody = _styledComponents2.default.div(_templateObject5);
  AccordionBody.displayName = 'AccordionBody';
  AccordionBody.defaultProps = {
    className: 'px-accordion__body'
  };

  var AccordionIcon = _styledComponents2.default.div(_templateObject6);
  AccordionIcon.displayName = 'AccordionIcon';

  var AccordionStatus = _styledComponents2.default.div(_templateObject7);
  AccordionStatus.displayName = 'AccordionStatus';

  var AccordionAction = _styledComponents2.default.div(_templateObject8);
  AccordionAction.displayName = 'AccordionAction';

  var Accordion = function (_React$Component) {
    _inherits(Accordion, _React$Component);

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

      var _this = _possibleConstructorReturn(this, (Accordion.__proto__ || Object.getPrototypeOf(Accordion)).call(this, props));

      _this.state = {
        open: props.opened || true
      };
      _this.onClick = _this.onClick.bind(_this);
      return _this;
    }

    _createClass(Accordion, [{
      key: 'onClick',
      value: function onClick() {
        if (!this.props.disabled) {
          this.setState(function (prevState, props) {
            return {
              open: !prevState.open
            };
          });
        }
      }
    }, {
      key: 'onActionClick',
      value: function onActionClick(e) {
        e.preventDefault();
      }
    }, {
      key: 'componentDidUpdate',
      value: function componentDidUpdate() {
        var _props = this.props,
            onCollapsed = _props.onCollapsed,
            onExpanded = _props.onExpanded;

        if (this.state.open) {} else {}
      }
    }, {
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        this.setState({ open: nextProps.opened });
      }
    }, {
      key: 'render',
      value: function render() {
        var open = this.state.open;
        var _props2 = this.props,
            _props2$headerValue = _props2.headerValue,
            headerValue = _props2$headerValue === undefined ? 'Accordion' : _props2$headerValue,
            status = _props2.status,
            disabled = _props2.disabled,
            showAction = _props2.showAction,
            onActionClick = _props2.onActionClick,
            _props2$icons = _props2.icons,
            icons = _props2$icons === undefined ? {
          more: 'px-utl:chevron-right',
          left: 'px-utl:chevron',
          action: 'px-utl:edit'
        } : _props2$icons,
            children = _props2.children;
        var more = icons.more,
            less = icons.less,
            action = icons.action;


        var baseClasses = (0, _classnames2.default)('px-accordion', { 'px-accordion--disabled': disabled }, { 'px-accordion--open': open });

        return _react2.default.createElement(
          AccordionContainer,
          { className: baseClasses },
          _react2.default.createElement(
            AccordionHeader,
            { disabled: disabled },
            _react2.default.createElement(
              _flex2.default,
              { item: true, onClick: this.onClick },
              _react2.default.createElement(
                'span',
                null,
                open && _react2.default.createElement(OpenIcon, null),
                !open && _react2.default.createElement(CloseIcon, null)
              ),
              _react2.default.createElement(
                AccordionHeaderText,
                null,
                headerValue
              )
            ),
            _react2.default.createElement(
              _flex2.default,
              { middle: true },
              status && _react2.default.createElement(
                AccordionStatus,
                null,
                status
              ),
              showAction && _react2.default.createElement(
                AccordionAction,
                { onClick: this.onActionClick.bind(this) },
                ' ',
                _react2.default.createElement(_Icon2.default, { icon: action, size: 16 }),
                ' '
              )
            )
          ),
          _react2.default.createElement(
            _IronCollapse2.default,
            { ref: 'collapse', opened: open },
            _react2.default.createElement(
              AccordionBody,
              null,
              children
            )
          )
        );
      }
    }]);

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

  Accordion.displayName = 'Accordion';
  exports.default = Accordion;
});