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 './style.css';

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

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

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

    _this.state = {
      selected: !props.selected ? props.options[0].text : props.selected
    };
    _this.handleOnChange = _this.handleOnChange.bind(_this);
    return _this;
  }

  SelectBox.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    this.setState({ selected: nextProps.selected });
  };
  /**
   * Default event handler which renders selected item in the patter div.
   *
   * @param event The DOM onChange event
   *
   * Invokes custom callback passed as prop onChangeCallback, passing back the
   * object with select information.
   */


  SelectBox.prototype.handleOnChange = function handleOnChange(event) {
    var selectedIndex = event.nativeEvent.target.selectedIndex;
    var selected = event.target[selectedIndex].text;
    var selectedValue = event.target[selectedIndex].value;
    this.setState({ selected: selected });

    // invokes custom function if passed in the component
    if (typeof this.props.onChangeCallback === 'function') {
      this.props.onChangeCallback({ selectedIndex: selectedIndex, selected: selected, selectedValue: selectedValue });
    }
  };

  SelectBox.prototype.render = function render() {
    var classNames = '';
    if (this.props.className) {
      classNames = this.props.className;
    } else {
      classNames = !this.props.required ? 'ma__select-box js-dropdown ma__select-box--optional' : 'ma__select-box js-dropdown';
    }
    var selectClassNames = this.props.required ? 'ma__select-box__select js-dropdown-select js-required' : 'ma__select-box__select js-dropdown-select';
    var selected = this.state.selected;
    var stackLabel = this.props.stackLabel;

    var labelClassNames = stackLabel ? 'ma__select-box__label' : 'ma__label--inline ma__label--small';
    var selectBoxInline = stackLabel ? '' : 'ma__select-box__field--inline';
    var getValueByText = function getValueByText() {
      var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
      var text = arguments[1];

      var matchedItem = array.find(function (item) {
        return item.text === text;
      });
      var matchedValue = matchedItem && matchedItem.value;
      return matchedValue;
    };
    var valueInOptions = getValueByText(this.props.options, selected);
    var selectedValue = valueInOptions || this.props.options[0].value;
    return React.createElement(
      'section',
      { className: classNames },
      React.createElement(
        'label',
        { htmlFor: this.props.id, className: labelClassNames },
        this.props.label
      ),
      React.createElement(
        'div',
        { className: 'ma__select-box__field ' + selectBoxInline },
        React.createElement(
          'select',
          {
            name: this.props.id,
            id: this.props.id,
            className: selectClassNames,
            onChange: this.handleOnChange,
            value: selectedValue
          },
          this.props.options.map(function (option) {
            return React.createElement(
              'option',
              { key: option.value, value: option.value },
              option.text
            );
          })
        ),
        React.createElement(
          'div',
          { className: 'ma__select-box__link' },
          React.createElement(
            'span',
            { className: 'js-dropdown-link' },
            valueInOptions ? selected : this.props.options[0].text
          ),
          React.createElement('span', { className: 'ma__select-box__icon' })
        )
      )
    );
  };

  return SelectBox;
}(React.Component);

SelectBox.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The label text above the select box */
  label: PropTypes.string.isRequired,
  /** Whether to stack label or inline label */
  stackLabel: PropTypes.bool,
  /** Whether the form field is required or not */
  required: PropTypes.bool,
  /** The id of the selectbox element */
  id: PropTypes.string.isRequired,
  /** An array of options for the selectbox */
  options: PropTypes.arrayOf(PropTypes.shape({
    value: PropTypes.oneOfType([PropTypes.string]),
    text: PropTypes.oneOfType([PropTypes.string])
  })),
  /** Change handler callback provided by the parent */
  onChangeCallback: PropTypes.func,
  /** Wrapper class for section tag */
  className: PropTypes.string,
  /** The default value for the select box */
  selected: PropTypes.string
} : {};

SelectBox.defaultProps = {
  required: false
};

export default SelectBox;