function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import ToggleButton from './ToggleButton';
import Icon from '../Icon';
import { asOptionObject, getValue } from './utils/options';
import MarkdownLabel from './MarkdownLabel';

class ToggleButtonGroup extends PureComponent {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "handleClickOption", event => {
      const {
        options,
        input
      } = this.props;
      const option = getValue(options[event.target.value]);
      const newValue = this.isOptionChecked(option) ? this.value.filter(value => value !== option) : [...this.value, option];
      input.onChange(newValue);
    });

    _defineProperty(this, "isOptionChecked", option => {
      const {
        input: {
          value = []
        }
      } = this.props;
      const included = value.includes(option);
      return included;
    });

    _defineProperty(this, "renderOption", (option, index) => {
      const {
        value: optionValue,
        label: optionLabel
      } = asOptionObject(option);
      return /*#__PURE__*/React.createElement(ToggleButton, {
        className: "form-field-togglebutton-group__option",
        key: index,
        input: {
          value: index,
          checked: this.isOptionChecked(optionValue),
          onChange: this.handleClickOption
        },
        label: optionLabel,
        color: `cat-color-seq-${index + 1}`
      });
    });
  }

  get value() {
    const {
      input: {
        value
      }
    } = this.props;
    return value;
  }

  render() {
    const {
      options,
      className,
      label,
      fieldLabel,
      input: {
        name
      },
      meta: {
        error,
        invalid,
        touched
      }
    } = this.props;
    const classNames = cx('form-field-togglebutton-group', 'form-field-container', className, {
      'form-field-togglebutton-group--has-error': invalid && touched && error
    });
    const anyLabel = fieldLabel || label;
    return /*#__PURE__*/React.createElement("div", {
      className: classNames
    }, anyLabel && /*#__PURE__*/React.createElement(MarkdownLabel, {
      label: anyLabel
    }), /*#__PURE__*/React.createElement("div", {
      className: "form-field form-field__inline",
      name: name
    }, options.map(this.renderOption)), invalid && touched && /*#__PURE__*/React.createElement("div", {
      className: "form-field-togglebutton-group__error"
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "warning"
    }), error));
  }

}

ToggleButtonGroup.propTypes = {
  options: PropTypes.array,
  className: PropTypes.string,
  label: PropTypes.string,
  fieldLabel: PropTypes.string,
  input: PropTypes.object.isRequired,
  meta: PropTypes.object
};
ToggleButtonGroup.defaultProps = {
  className: null,
  label: null,
  fieldLabel: null,
  options: [],
  meta: {}
};
export default ToggleButtonGroup;