import React from 'react';
import 'react-dom';
import { _ as _defineProperty, d as _objectWithoutProperties, e as _extends, c as _slicedToArray, a as _objectSpread2 } from '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import '../index-6829ab1f.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 '../index-fc484d02.js';
import '../overlays/withTooltip.js';
import { C as Context } from '../index-155df85b.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-b65fa23c.js';
import { Label } from '../ui/label.js';
import '../index.esm-f8e9e79f.js';
import '@styled-system/grid';
import '@styled-system/background';

var css_248z = ".RadioOption_radioOption__1J-a4 {\n  display: flex;\n  align-items: center;\n  margin-right: 24px;\n  cursor: pointer; }\n  .RadioOption_radioOption__1J-a4:hover svg path {\n    fill: rgba(18, 79, 160, 0.1); }\n  .RadioOption_radioOption__1J-a4.RadioOption_disabled__3H74n {\n    filter: grayscale(1);\n    pointer-events: none;\n    opacity: 0.8; }\n\n.RadioOption_radioOptionBox__1yJM0 {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  margin-right: 8px;\n  border-radius: 22px;\n  border: 1px solid #666;\n  transition: 0.2s ease-out; }\n\n.RadioOption_radioOptionBoxTick__3ScsK {\n  width: 12px;\n  height: 12px;\n  border-radius: 8px;\n  opacity: 0;\n  transform: scale(0.5, 0.5);\n  transition: 0.2s ease-out; }\n  .RadioOption_radioOptionBoxTick__3ScsK.RadioOption_selected__276j9 {\n    opacity: 1;\n    transform: scale(1, 1); }\n\n.RadioOption_radioOptionText__NnSGX {\n  font-size: 14px;\n  font-weight: 400;\n  transition: 0.2s ease-out;\n  color: #666; }\n\n.RadioOption_hint__1obMG {\n  font-size: 12px;\n  color: #777777;\n  padding-left: 26px;\n  padding-right: 26px;\n  margin-top: 4px; }\n";
var styles = {"radioOption":"RadioOption_radioOption__1J-a4","disabled":"RadioOption_disabled__3H74n","radioOptionBox":"RadioOption_radioOptionBox__1yJM0","radioOptionBoxTick":"RadioOption_radioOptionBoxTick__3ScsK","selected":"RadioOption_selected__276j9","radioOptionText":"RadioOption_radioOptionText__NnSGX","hint":"RadioOption_hint__1obMG"};
styleInject(css_248z);

var RadioOption = function RadioOption(_ref) {
  var label = _ref.label,
    onChange = _ref.onChange,
    value = _ref.value,
    innerRef = _ref.innerRef,
    className = _ref.className,
    prefixClassName = _ref.prefixClassName,
    disabled = _ref.disabled;
  var _React$useContext = React.useContext(Context),
    primaryColor = _React$useContext.primaryColor;
  var classNames = {
    main: cc([styles.radioOption, className, prefixClassName, _defineProperty({}, styles.disabled, disabled), _defineProperty({}, styles.selected, value), _defineProperty({}, styles.selected, "".concat(prefixClassName, "-selected"))]),
    box: cc([styles.radioOptionBox, "".concat(prefixClassName, "-box")]),
    boxIcon: cc([styles.radioOptionBoxTick, "".concat(prefixClassName, "-box-tick"), _defineProperty({}, styles.selected, value)]),
    label: cc([styles.radioOptionText, "".concat(prefixClassName, "-text")])
  };
  var colorStyles = {
    boxIcon: {
      backgroundColor: primaryColor
    },
    box: value ? {
      borderColor: primaryColor
    } : {},
    label: value ? {
      color: primaryColor
    } : {}
  };
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "radio-item",
    ref: innerRef,
    className: classNames.main,
    onClick: function onClick(e) {
      return onChange(!value, e);
    }
  }, /*#__PURE__*/React.createElement("div", {
    style: colorStyles.box,
    className: classNames.box
  }, /*#__PURE__*/React.createElement("div", {
    style: colorStyles.boxIcon,
    className: classNames.boxIcon
  })), /*#__PURE__*/React.createElement("span", {
    style: colorStyles.label,
    className: classNames.label
  }, label));
};
RadioOption.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
};
RadioOption.defaultProps = {
  label: "",
  className: "",
  onChange: function onChange() {},
  value: false,
  innerRef: function innerRef() {},
  prefixClassName: "",
  disabled: false
};
RadioOption.classNames = {
  $prefix: "Outermost element",
  "$prefix-box": "Div wrapping the icon",
  "$prefix-box-tick": "The icon div",
  "$prefix-text": "The Text of each of the radio options"
};
RadioOption.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "RadioOption",
  "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"
    }
  }
};

var css_248z$1 = ".Radio_radio__2MQ2F {\n  position: relative; }\n\n.Radio_radioLabel__24DE2 {\n  display: block;\n  color: #666;\n  font-size: 12px;\n  font-weight: 600;\n  margin-bottom: 6px;\n  margin-left: 2px;\n  transition: 0.2s ease-out; }\n  .Radio_radioLabel__24DE2.Radio_focused__a44S- {\n    color: #124fa0; }\n\n.Radio_radioOptions__2SL8O {\n  display: flex;\n  margin-left: 2px; }\n";
var styles$1 = {"radio":"Radio_radio__2MQ2F","radioLabel":"Radio_radioLabel__24DE2","focused":"Radio_focused__a44S-","radioOptions":"Radio_radioOptions__2SL8O"};
styleInject(css_248z$1);

function useRadio(value, onChange, options, optionKey) {
  var getIndex = function getIndex() {
    var index = -1;
    options.forEach(function (option, i) {
      if (option[optionKey] === (value || {})[optionKey]) {
        index = i;
      }
    });
    return index;
  };
  var activeIndex = getIndex();
  var handleChange = function handleChange(index) {
    return function () {
      onChange(options[index]);
    };
  };
  return [activeIndex, handleChange];
}

var _excluded = ["children", "value", "selectedValue", "onClick"];
var RadioIconOuter = styled("div")({
  width: "18px",
  height: "18px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  borderRadius: "50%",
  marginRight: function marginRight(props) {
    return "".concat(props.theme.space.sm, "px");
  },
  backgroundColor: function backgroundColor(props) {
    return props.theme.colors.backgroundColor;
  },
  borderStyle: "solid",
  borderWidth: function borderWidth(props) {
    return "".concat(props.theme.borderWidths.xs, "px");
  }
}, variant({
  variants: {
    primary: {
      borderColor: "blue.haptik"
    },
    disabled: {
      borderColor: "grey.dark"
    }
  }
}));
var RadioIconInner = styled("div")({
  width: "10px",
  height: "10px",
  borderRadius: "50%",
  transition: "opacity 0.25s ease, transform 0.25s ease",
  transform: function transform(props) {
    return props.selected ? "scale(1, 1)" : "scale(0.5, 0.5)";
  },
  opacity: function opacity(props) {
    return props.selected ? 1 : 0;
  }
}, variant({
  variants: {
    primary: {
      backgroundColor: "blue.haptik"
    },
    disabled: {
      backgroundColor: "grey.dark"
    }
  }
}));

/**
 * Component to render radio icon
 * @param {Object} props
 * @param {boolean} props.selected
 * @param {boolean} props.disabled
 */
var RadioIcon = function RadioIcon(props) {
  return /*#__PURE__*/React.createElement(RadioIconOuter, props, /*#__PURE__*/React.createElement(RadioIconInner, props));
};
RadioIcon.propTypes = {
  selected: PropTypes.bool,
  disabled: PropTypes.bool
};
var Item = styled(Box)({
  padding: 0,
  flexShrink: 0,
  alignItems: "center"
}, variant({
  variants: {
    primary: {
      cursor: "pointer"
    },
    disabled: {
      cursor: "not-allowed"
    }
  }
}), variant({
  prop: "mode",
  variants: {
    inline: {
      marginRight: "md"
    },
    stacked: {
      marginBottom: "md"
    }
  }
}));
var RadioText = styled(Text)(variant({
  variants: {
    primary: {
      color: "text"
    },
    disabled: {
      color: "grey.dark"
    }
  }
}));

/**
 * Component to render radio options
 * @param {Object} props
 * @param {Object} props.children
 * @param {string} props.value
 * @param {string} props.selectedValue
 * @param {()=>{}} props.onClick
 * @param {Object} props.designProps
 * @param {boolean} props.disabled
 */
var RadioItem = function RadioItem(_ref) {
  var children = _ref.children,
    value = _ref.value,
    selectedValue = _ref.selectedValue,
    _onClick = _ref.onClick,
    designProps = _objectWithoutProperties(_ref, _excluded);
  return /*#__PURE__*/React.createElement(Item, _extends({
    onClick: function onClick() {
      designProps.variant !== "disabled" && _onClick && _onClick(value);
    }
  }, designProps), /*#__PURE__*/React.createElement(RadioIcon, _extends({
    selected: selectedValue === value
  }, designProps)), /*#__PURE__*/React.createElement(RadioText, _extends({
    variant: "body.lg"
  }, designProps), children));
};
RadioItem.propTypes = {
  children: PropTypes.node,
  value: PropTypes.string,
  selectedValue: PropTypes.string,
  variant: PropTypes.string,
  mode: PropTypes.string,
  onClick: PropTypes.func,
  designProps: PropTypes.object
};
RadioItem.propTypes = {
  variant: "primary",
  mode: "inline"
};
RadioItem.__docgenInfo = {
  "description": "Component to render radio options\n@param {Object} props\n@param {Object} props.children\n@param {string} props.value\n@param {string} props.selectedValue\n@param {()=>{}} props.onClick\n@param {Object} props.designProps\n@param {boolean} props.disabled",
  "methods": [],
  "displayName": "RadioItem",
  "props": {
    "variant": {
      "type": {
        "name": "custom",
        "raw": "\"primary\""
      },
      "required": false,
      "description": ""
    },
    "mode": {
      "type": {
        "name": "custom",
        "raw": "\"inline\""
      },
      "required": false,
      "description": ""
    }
  }
};

var _excluded$1 = ["children", "onChange"],
  _excluded2 = ["children"];

/**
 * Intermediatory component to in-house state logic for Radio
 * @component
 * @param {Object} props
 * @param {Object} props.children
 * @param {()=>{}} props.onChange
 * @param {Object} props.designProps
 */
var RadioBody = function RadioBody(_ref) {
  var children = _ref.children,
    onChange = _ref.onChange,
    designProps = _objectWithoutProperties(_ref, _excluded$1);
  var _React$useState = React.useState(),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    selectedValue = _React$useState2[0],
    setSelectedValue = _React$useState2[1];
  React.useEffect(function () {
    onChange && onChange(selectedValue);
  }, [selectedValue]);
  var childrenWithProps = React.Children.map(children, function (element) {
    return /*#__PURE__*/React.cloneElement(element, _objectSpread2({
      onClick: setSelectedValue,
      selectedValue: selectedValue
    }, designProps));
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, childrenWithProps);
};
RadioBody.propTypes = {
  children: PropTypes.node,
  onChange: PropTypes.func
};
var RadioWrapper = styled(Box)(variant({
  prop: "mode",
  variants: {
    inline: {
      flexDirection: "row"
    },
    stacked: {
      flexDirection: "column"
    }
  }
}));
RadioWrapper.defaultProps = {
  variant: "primary"
};

/**
 *
 * @param {Object} props
 * @param {Object} props.children
 * @param {string} props.mode
 * @param {string} props.variant
 * @returns
 */
function Radio(_ref2) {
  var children = _ref2.children,
    restProps = _objectWithoutProperties(_ref2, _excluded2);
  return /*#__PURE__*/React.createElement(RadioWrapper, restProps, /*#__PURE__*/React.createElement(RadioBody, restProps, children));
}
Radio.propTypes = {
  children: PropTypes.node,
  mode: PropTypes.string,
  variant: PropTypes.string
};
Radio.defaultProps = {
  mode: "inline",
  variant: "primary"
};
Radio.Item = RadioItem;
Radio.__docgenInfo = {
  "description": "@param {Object} props\n@param {Object} props.children\n@param {string} props.mode\n@param {string} props.variant\n@returns",
  "methods": [],
  "displayName": "Radio",
  "props": {
    "mode": {
      "defaultValue": {
        "value": "\"inline\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "variant": {
      "defaultValue": {
        "value": "\"primary\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "children": {
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    }
  }
};

var _excluded$2 = ["options", "label", "hint", "className", "prefixClassName", "error", "tooltip", "disabled", "value", "onChange", "optionKey"];
var Radio$1 = function Radio$1(_ref) {
  var options = _ref.options,
    label = _ref.label,
    hint = _ref.hint,
    className = _ref.className,
    prefixClassName = _ref.prefixClassName,
    error = _ref.error,
    tooltip = _ref.tooltip,
    disabled = _ref.disabled,
    value = _ref.value,
    onChange = _ref.onChange,
    optionKey = _ref.optionKey,
    designProps = _objectWithoutProperties(_ref, _excluded$2);
  var _useRadio = useRadio(value, onChange, options, optionKey),
    _useRadio2 = _slicedToArray(_useRadio, 2),
    activeIndex = _useRadio2[0],
    handleChange = _useRadio2[1];
  if (designProps.themed) {
    return /*#__PURE__*/React.createElement(Box, {
      flexDirection: "column",
      padding: "zero"
    }, Boolean(label) && /*#__PURE__*/React.createElement(Label, {
      themed: true,
      hint: hint,
      tooltip: tooltip,
      error: error,
      disabled: disabled
    }, label), /*#__PURE__*/React.createElement(RadioWrapper, designProps, options.map(function (option, i) {
      return /*#__PURE__*/React.createElement(Radio.Item, _extends({
        key: i,
        value: option.title,
        selectedValue: options[activeIndex][optionKey],
        onClick: handleChange(i)
      }, designProps), option.title);
    })));
  }
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "radio",
    className: "".concat(styles$1.radio, " ").concat(className, " ").concat(prefixClassName)
  }, /*#__PURE__*/React.createElement(Label, {
    hint: hint,
    tooltip: tooltip,
    error: error,
    disabled: disabled,
    className: "".concat(prefixClassName, "-label")
  }, label), /*#__PURE__*/React.createElement("div", {
    className: "".concat(styles$1.radioOptions, " ").concat(prefixClassName, "-options")
  }, options.map(function (option, i) {
    return /*#__PURE__*/React.createElement(RadioOption, {
      key: i,
      value: activeIndex === i,
      onChange: handleChange(i),
      label: option.title,
      disabled: disabled,
      error: error,
      prefixClassName: "".concat(prefixClassName, "-option")
    });
  })));
};
Radio$1.propTypes = {
  /** The classname to appended to the outermost element */
  className: PropTypes.string,
  /** The hint text that shows up below the label */
  hint: PropTypes.string,
  /** The value of the input */
  value: PropTypes.string,
  /** Label text */
  label: PropTypes.string,
  /** If the input has an error. */
  error: PropTypes.bool,
  /** onChange callback */
  onChange: PropTypes.func,
  /** The prefix classname appended to all elements */
  prefixClassName: PropTypes.string,
  /** Array of options (checkboxes) */
  options: PropTypes.array,
  /** If the input is disabled (non-editable) */
  disabled: PropTypes.bool,
  /** Tooltip showed next to the label */
  tooltip: PropTypes.string,
  /** the key that acts like an identifier for the options  */
  optionKey: PropTypes.string,
  /** the key that acts like an identifier for themed comps.  */
  themed: PropTypes.bool,
  /** the key that acts like an identifier for radio mode - inline|stacked  */
  mode: PropTypes.string,
  /** the key that acts like an identifier for radio item variant - primary|disabled  */
  variant: PropTypes.string
};
Radio$1.defaultProps = {
  className: "",
  hint: "",
  value: "",
  label: "",
  error: false,
  onChange: function onChange() {},
  prefixClassName: "",
  options: [],
  disabled: false,
  tooltip: "",
  optionKey: "title",
  themed: false,
  mode: "inline",
  variant: "primary"
};
Radio$1.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"
};
Radio$1.Item = RadioOption;
Radio$1.Themed = Radio;
Radio$1.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Radio",
  "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)"
    },
    "tooltip": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Tooltip showed next to the label"
    },
    "optionKey": {
      "defaultValue": {
        "value": "\"title\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "the key that acts like an identifier for the options"
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "the key that acts like an identifier for themed comps."
    },
    "mode": {
      "defaultValue": {
        "value": "\"inline\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "the key that acts like an identifier for radio mode - inline|stacked"
    },
    "variant": {
      "defaultValue": {
        "value": "\"primary\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "the key that acts like an identifier for radio item variant - primary|disabled"
    }
  }
};

export default Radio$1;
