import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import React from 'react';

// individual checkbox, applies state-template styling
var Checkbox = function Checkbox(_ref) {
  var input = _ref.input,
      value = _ref.value,
      label = _ref.label,
      variant = _ref.variant,
      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 (variant) {
    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-".concat(variant, "--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);
};

Checkbox.defaultProps = {
  variant: '',
  disabled: false
};
export default Checkbox;