import React from 'react';
import 'react-dom';
import { b as _taggedTemplateLiteral, _ as _defineProperty, c as _slicedToArray, a as _objectSpread2, e as _extends } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import '../overlays/tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import variant from '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import Icon from '../ui/icon.js';
import '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import '../angle-down-4038e060.js';
import { T as TickIcon } from '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import '../overlays/withTooltip.js';
import { C as Context } from '../index-91504e81.js';
import Text from '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import Box from '../ui/box.js';
import { c as cc } from '../index-9efc6429.js';
import { Label } from '../ui/label.js';

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  width: 16px;\n  height: 16px;\n  opacity: ", ";\n  transform: translateY(", ");\n  transition: 0.2s ease-out;\n  svg * {\n    stroke: #eaeaea;\n    stroke-width: 2px;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var checkboxWrapperItem = variant({
  prop: "mode",
  scale: "checkboxItemWrapperModes",
  variants: {
    inline: {}
  }
}); // Non customizable CSS props

var checkboxItemStyle = function checkboxItemStyle(props) {
  return {
    alignItems: "center",
    cursor: !props.disabled && "pointer",
    pointerEvents: props.disabled && "none",
    "&:last-child": {
      marginBottom: 0
    }
  };
};

var ThemedCheckboxItemWrapper = styled(Box)(checkboxItemStyle, checkboxWrapperItem);

var iff = function iff(condition, then, otherwise) {
  return condition ? then : otherwise;
};

var checkboxItem = variant({
  scale: "checkboxVariants",
  variants: {}
}); // Non customizable CSS props

var checkboxStyle = function checkboxStyle(props) {
  return {
    justifyContent: "center",
    alignItems: "center",
    transition: "background-color 0.2s ease-out",
    backgroundColor: props.value ? iff(props.disabled, props.theme.colors.grey.deep, props.theme.colors.blue.haptik) : props.theme.colors.background,
    width: 18,
    height: 18,
    marginRight: props.theme.space.sm,
    borderRadius: props.theme.space.xs,
    borderWidth: props.theme.borderWidths.xs,
    borderColor: props.disabled ? props.theme.colors.grey.deep : props.theme.colors.blue.haptik,
    padding: 0
  };
};

var ThemedCheckbox = styled(Box)(checkboxStyle, checkboxItem);
var ThemedCheckboxIcon = styled(Icon)(_templateObject(), function (props) {
  return props.value ? 1 : 0;
}, function (props) {
  return props.value ? "0px" : "5px";
});

var ThemedCheckboxItem = function ThemedCheckboxItem(props) {
  var label = props.label,
      onChange = props.onChange,
      value = props.value,
      disabled = props.disabled,
      mode = props.mode;
  return React.createElement(ThemedCheckboxItemWrapper, {
    disabled: disabled,
    mode: mode,
    onClick: function onClick(e) {
      return onChange(!value, e);
    }
  }, React.createElement(ThemedCheckbox, {
    disabled: disabled,
    value: value
  }, React.createElement(ThemedCheckboxIcon, {
    value: value,
    src: TickIcon
  })), React.createElement(Text, {
    variant: "body.md"
  }, label));
};

ThemedCheckboxItem.propTypes = {
  label: PropTypes.string,
  onChange: PropTypes.func,
  value: PropTypes.bool,
  disabled: PropTypes.string,
  mode: PropTypes.string
};
ThemedCheckboxItem.defaultProps = {
  mode: "inline"
};
ThemedCheckboxItem.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ThemedCheckboxItem",
  "props": {
    "mode": {
      "defaultValue": {
        "value": "\"inline\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "label": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onChange": {
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "disabled": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    }
  }
};

var css = ".CheckboxOption_checkboxOption__2dioS {\n  display: flex;\n  align-items: center;\n  margin-right: 24px;\n  cursor: pointer; }\n  .CheckboxOption_checkboxOption__2dioS:hover svg path {\n    fill: rgba(18, 79, 160, 0.1); }\n  .CheckboxOption_checkboxOption__2dioS.CheckboxOption_disabled__3DN5D {\n    filter: grayscale(1);\n    pointer-events: none;\n    opacity: 0.8; }\n\n.CheckboxOption_checkboxOptionBox__1g3RA {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-right: 8px;\n  border-radius: 4px;\n  border: 1px solid #666;\n  transition: 0.2s ease-out; }\n\n.CheckboxOption_checkboxOptionBoxTick__1ah4m {\n  width: 12px;\n  height: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transform: translateY(5px);\n  transition: 0.2s ease-out; }\n  .CheckboxOption_checkboxOptionBoxTick__1ah4m svg * {\n    stroke: #fff;\n    stroke-width: 2px; }\n  .CheckboxOption_checkboxOptionBoxTick__1ah4m.CheckboxOption_selected__3DFYX {\n    opacity: 1;\n    transform: translateY(0px); }\n\n.CheckboxOption_checkboxOptionText__qiLTY {\n  font-size: 14px;\n  font-weight: 400;\n  transition: 0.2s ease-out;\n  color: #666; }\n";
var styles = {"checkboxOption":"CheckboxOption_checkboxOption__2dioS","disabled":"CheckboxOption_disabled__3DN5D","checkboxOptionBox":"CheckboxOption_checkboxOptionBox__1g3RA","checkboxOptionBoxTick":"CheckboxOption_checkboxOptionBoxTick__1ah4m","selected":"CheckboxOption_selected__3DFYX","checkboxOptionText":"CheckboxOption_checkboxOptionText__qiLTY"};
styleInject(css);

var CheckboxOption = function CheckboxOption(props) {
  var label = props.label,
      onChange = props.onChange,
      value = props.value,
      innerRef = props.innerRef,
      className = props.className,
      prefixClassName = props.prefixClassName,
      disabled = props.disabled;

  if (props.themed) {
    return React.createElement(ThemedCheckboxItem, props);
  }

  var _React$useContext = React.useContext(Context),
      primaryColor = _React$useContext.primaryColor;

  var classNames = {
    main: cc([styles.checkboxOption, className, prefixClassName, _defineProperty({}, styles.disabled, disabled), _defineProperty({}, styles.selected, value), _defineProperty({}, styles.selected, "".concat(prefixClassName, "-selected"))]),
    box: cc([styles.checkboxOptionBox, "".concat(prefixClassName, "-box")]),
    boxIcon: cc([styles.checkboxOptionBoxTick, "".concat(prefixClassName, "-box-tick"), _defineProperty({}, styles.selected, value)]),
    label: cc([styles.checkboxOptionText, "".concat(prefixClassName, "-text")])
  };
  var colorStyles = {
    box: value ? {
      background: primaryColor,
      borderColor: primaryColor
    } : {},
    label: value ? {
      color: primaryColor
    } : {}
  };
  return React.createElement("div", {
    ref: innerRef,
    "data-testid": "checkbox-item",
    className: classNames.main,
    onClick: function onClick(e) {
      return onChange(!value, e);
    }
  }, React.createElement("div", {
    style: colorStyles.box,
    className: classNames.box
  }, React.createElement(Icon, {
    className: classNames.boxIcon,
    src: TickIcon
  })), React.createElement("span", {
    style: colorStyles.label,
    className: classNames.label
  }, label));
};

CheckboxOption.propTypes = {
  /** Label text */
  label: PropTypes.string,

  /** The classname to appended to the outermost element */
  className: PropTypes.string,

  /** onChange callback */
  onChange: PropTypes.func,

  /** The value of the input */
  value: PropTypes.bool,

  /** For assigning a ref to the outermost element */
  innerRef: PropTypes.func,

  /** The prefix classname appended to all elements */
  prefixClassName: PropTypes.string,

  /** Whether the input is enabled or disabled */
  disabled: PropTypes.string,
  themed: PropTypes.bool
};
CheckboxOption.defaultProps = {
  label: "",
  className: "",
  onChange: function onChange() {},
  value: false,
  innerRef: function innerRef() {},
  prefixClassName: "",
  disabled: false,
  themed: false
};
CheckboxOption.classNames = {
  $prefix: "Outermost element",
  "$prefix-box": "Div wrapping the icon",
  "$prefix-box-tick": "The icon div",
  "$prefix-text": "The Text of each of the checkbox options"
};
CheckboxOption.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "CheckboxOption",
  "props": {
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label text"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to appended to the outermost element"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onChange callback"
    },
    "value": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "The value of the input"
    },
    "innerRef": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "For assigning a ref to the outermost element"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The prefix classname appended to all elements"
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Whether the input is enabled or disabled"
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  }
};

var css$1 = ".Checkbox_checkbox__niF5T {\n  position: relative; }\n\n.Checkbox_checkboxLabel__2Ydkg {\n  display: block;\n  color: #666;\n  font-size: 12px;\n  font-weight: 600;\n  margin-bottom: 0px;\n  margin-left: 2px;\n  transition: 0.2s ease-out; }\n\n.Checkbox_checkboxHint__1Djyt {\n  display: block;\n  color: #999;\n  font-size: 13px;\n  font-weight: 400;\n  margin-bottom: 12px;\n  margin-left: 2px;\n  transition: 0.2s ease-out; }\n\n.Checkbox_checkboxOptions__3YnsQ {\n  display: flex;\n  margin-left: 2px; }\n";
var styles$1 = {"checkbox":"Checkbox_checkbox__niF5T","checkboxLabel":"Checkbox_checkboxLabel__2Ydkg","checkboxHint":"Checkbox_checkboxHint__1Djyt","checkboxOptions":"Checkbox_checkboxOptions__3YnsQ"};
styleInject(css$1);

function useCheckbox(value, onChange, options) {
  var getIndexes = function getIndexes() {
    var activeIds = value.map(function (valueItem) {
      return valueItem.title;
    });
    var activeIndexes = [];
    options.map(function (option, i) {
      if (activeIds.includes(option.title)) {
        activeIndexes.push(i);
      }
    });
    return activeIndexes;
  };

  var activeIndexes = getIndexes();

  var handleChange = function handleChange(index) {
    return function () {
      var indexPosition = activeIndexes.indexOf(index);
      if (indexPosition > -1) activeIndexes.splice(indexPosition, 1);else activeIndexes.push(index);
      onChange(activeIndexes.map(function (activeIndex) {
        return options[activeIndex];
      }));
    };
  };

  return [activeIndexes, handleChange];
}

var CheckboxWrapperMode = variant({
  prop: "mode",
  scale: "checkboxWrapperModes",
  variants: {
    stacked: {}
  }
});
var checkboxWrapperVariant = variant({
  prop: "variant",
  scale: "checkboxWrapperVariants",
  variants: {
    stacked: {}
  }
});
var ThemedCheckboxWrapper = styled(Box)(CheckboxWrapperMode, checkboxWrapperVariant);
ThemedCheckboxWrapper.defaultProps = {
  mode: "stacked",
  padding: "zero"
};

var Checkbox = function Checkbox(props) {
  var value = props.value,
      onChange = props.onChange,
      options = props.options,
      label = props.label,
      hint = props.hint,
      disabled = props.disabled,
      className = props.className,
      prefixClassName = props.prefixClassName,
      error = props.error;

  var _useCheckbox = useCheckbox(value, onChange, options),
      _useCheckbox2 = _slicedToArray(_useCheckbox, 2),
      activeIndexes = _useCheckbox2[0],
      handleChange = _useCheckbox2[1];

  if (props.themed) {
    var checkboxProps = _objectSpread2({}, props, {
      "data-testid": "checkbox"
    });

    return React.createElement(React.Fragment, null, label && React.createElement(Label, {
      hint: hint,
      disabled: disabled,
      error: error,
      themed: true
    }, label), React.createElement(ThemedCheckboxWrapper, _extends({}, checkboxProps, {
      variant: label ? "withLabel" : "default"
    }), props.options.map(function (option, i) {
      return React.createElement(ThemedCheckboxItem, {
        value: activeIndexes.includes(i),
        onChange: handleChange(i),
        label: option.title,
        error: error,
        themed: props.themed,
        mode: props.mode,
        disabled: disabled,
        prefixClassName: "".concat(prefixClassName, "-option")
      });
    })));
  }

  return React.createElement("div", {
    "data-testid": "checkbox",
    className: "".concat(styles$1.checkbox, " ").concat(className, " ").concat(prefixClassName)
  }, React.createElement(Label, {
    hint: hint,
    disabled: disabled,
    error: error,
    className: "".concat(styles$1.dropdownLabel, " ").concat(prefixClassName, "-label")
  }, label), React.createElement("div", {
    className: "".concat(styles$1.checkboxOptions, " ").concat(prefixClassName, "-options")
  }, options.map(function (option, i) {
    return React.createElement(CheckboxOption, {
      value: activeIndexes.includes(i),
      onChange: handleChange(i),
      label: option.title,
      error: error,
      disabled: disabled,
      prefixClassName: "".concat(prefixClassName, "-option")
    });
  })));
};

Checkbox.propTypes = {
  /** The classname to appended to the outermost element */
  className: PropTypes.string,

  /** The hint text that shows up below the label */
  hint: PropTypes.string,

  /** Label text */
  label: PropTypes.string,

  /** If the input has an error. */
  error: PropTypes.bool,

  /** The prefix classname appended to all elements */
  prefixClassName: PropTypes.string,
  // Themed props

  /** onChange callback */
  onChange: PropTypes.func,

  /** The value of the input */
  value: PropTypes.string,

  /** Array of options (checkboxes) */
  options: PropTypes.array,

  /** If the input is disabled (non-editable) */
  disabled: PropTypes.bool,

  /** Mode to align checkboxes vertically or horizontally */
  mode: PropTypes.string,
  themed: PropTypes.bool
};
Checkbox.defaultProps = {
  className: "",
  hint: "",
  value: "",
  label: "",
  error: false,
  onChange: function onChange() {},
  prefixClassName: "",
  options: [],
  disabled: false,
  mode: "stacked",
  themed: false
};
Checkbox.classNames = {
  $prefix: "Outermost element",
  "$prefix-label": "Label of the input",
  "$prefix-options": "Div wrapping all the options",
  "$prefix-option": "Div wrapping the option",
  "$prefix-option-box": "Div wrapping the icon",
  "$prefix-option-box-tick": "The icon div inside the box",
  "$prefix-option-text": "The Text of each of the checkbox options"
};
Checkbox.Item = CheckboxOption;
Checkbox.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Checkbox",
  "props": {
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to appended to the outermost element"
    },
    "hint": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The hint text that shows up below the label"
    },
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The value of the input"
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label text"
    },
    "error": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If the input has an error."
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onChange callback"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The prefix classname appended to all elements"
    },
    "options": {
      "defaultValue": {
        "value": "[]",
        "computed": false
      },
      "type": {
        "name": "array"
      },
      "required": false,
      "description": "Array of options (checkboxes)"
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If the input is disabled (non-editable)"
    },
    "mode": {
      "defaultValue": {
        "value": "\"stacked\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Mode to align checkboxes vertically or horizontally"
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  }
};

export default Checkbox;
