import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import React from 'react';
import { isEmptyCheck } from '../../utils/validate';
import FieldWrapper from './FieldWrapper';
import withField from './withField'; // individual checkbox, applies state-template styling

var Checkbox = function Checkbox(_ref) {
  var input = _ref.input,
      value = _ref.value,
      label = _ref.label,
      primary = _ref.primary,
      disabled = _ref.disabled;
  var checked = input.value.toString().indexOf(value) !== -1;

  var onChange = function onChange(event) {
    var newValue = _toConsumableArray(input.value);

    if (newValue[0] === '') {
      newValue.shift();
    }

    if (event.target.checked) {
      newValue.push(value);
    } else {
      newValue.splice(newValue.indexOf(value), 1);
    }

    return input.onChange(newValue);
  };

  var inputProps = {
    disabled: disabled,
    checked: checked,
    onChange: onChange,
    type: 'checkbox',
    name: input.name
  };

  if (primary) {
    return React.createElement("label", {
      className: 'check'
    }, React.createElement("input", Object.assign({
      className: 'hidden-up pos-abs top-0 left-0'
    }, inputProps)), React.createElement("span", {
      className: 'btn btn-md btn-block color-white--checked bg-primary--checked rounded-0'
    }, label));
  }

  return React.createElement("label", {
    className: 'form-check-inline p-l-md m-l-0 m-r-md'
  }, React.createElement("input", Object.assign({
    className: 'hidden-up pos-abs'
  }, inputProps)), React.createElement("div", {
    className: 'check-icon-checkbox'
  }, React.createElement("i", {
    className: 'ca-gov-icon-check-mark'
  })), label);
}; // group of checkboxes with optional help text and label
// displays error if validation fails


export var FieldCheckboxes = function FieldCheckboxes(props) {
  var input = props.input,
      options = props.options,
      primary = props.primary,
      disabled = props.disabled;
  var disabledClass = disabled ? 'disabled' : '';
  return React.createElement(FieldWrapper, props, React.createElement("div", {
    className: disabledClass
  }, options.filter(function (x) {
    return !x.hidden;
  }).map(function (option) {
    return React.createElement(Checkbox, Object.assign({
      input: input,
      key: option.value,
      primary: primary,
      disabled: disabled
    }, option));
  })));
};
FieldCheckboxes.defaultProps = {
  primary: false,
  disabled: false
};
var withReduxField = withField(isEmptyCheck);
export default withReduxField(FieldCheckboxes);