"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.CheckBoxGroup = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _react = _interopRequireDefault(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));

var _jsxRuntime = require("react/jsx-runtime");

// Generated with util/create-component.js
const CheckBoxGroup = props => {
  const theme = (0, _useTheme.default)();
  const {
    color = null,
    textColor = null,
    size = null,
    shape = null,
    onChange = () => {},
    align = "start",
    justify = "start",
    wrap = "nowrap",
    direction = "row",
    fullWidth = false,
    spacing = 1,
    max = 999999,
    children,
    className,
    ...otherProps
  } = props;

  const [selectedIndex, setSelectedIndex] = _react.default.useState([]);

  function handleAlign() {
    switch (align) {
      case "center":
        return "center";

      case "end":
        return "flex-end";

      default:
        return "flex-start";
    }
  }

  function handleJustify() {
    switch (justify) {
      case "center":
        return "center";

      case "end":
        return "flex-end";

      case "between":
        return "space-between";

      case "around":
        return "space-around";

      case "evenly":
        return "space-evenly";

      default:
        return "flex-start";
    }
  }

  function handleMargin() {
    switch (direction) {
      case "row":
        return `margin-right: ${spacing * theme.layout.spacingUnit}px;`;

      case "column":
        return `margin-bottom: ${spacing * theme.layout.spacingUnit}px;`;

      case "row-reverse":
        return `margin-left: ${spacing * theme.layout.spacingUnit}px;`;

      case "column-reverse":
        return `margin-top: ${spacing * theme.layout.spacingUnit}px;`;

      default:
        return `margin-right: ${spacing * theme.layout.spacingUnit}px;`;
    }
  }

  function handleSelectedIndex(index, checked) {
    let newSelectedIndex = [...selectedIndex];

    if (checked) {
      newSelectedIndex = [...selectedIndex, index];
    } else {
      newSelectedIndex = selectedIndex.filter(i => i !== index);
    }

    if (newSelectedIndex.length <= max) {
      setSelectedIndex(newSelectedIndex);
      onChange(newSelectedIndex);
    } else {
      onChange([...selectedIndex]);
    }
  }

  const childrenWithProps = _react.default.Children.map(children, (child, index) => {
    // Checking isValidElement is the safe way and avoids a typescript
    // error too.
    if ( /*#__PURE__*/_react.default.isValidElement(child) && typeof child.type === "function" && child.type.name === "CheckBox") {
      return /*#__PURE__*/_react.default.cloneElement(child, {
        groupShape: shape,
        groupSize: size,
        groupColor: color,
        groupTextColor: textColor,
        checked: selectedIndex.includes(index),
        onClick: () => {
          handleSelectedIndex(index, !selectedIndex.includes(index));
        }
      });
    }

    return child;
  });

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "data-testid": "Wps-CheckBoxGroup",
    ...otherProps,
    className: _style.default.dynamic([["1141861320", [direction, wrap, handleJustify(), handleAlign(), fullWidth ? "100%" : "max-content", handleMargin()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || (0, _classnames.default)("Wps-CheckBoxGroup", className) || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "1141861320",
      dynamic: [direction, wrap, handleJustify(), handleAlign(), fullWidth ? "100%" : "max-content", handleMargin()],
      children: `.Wps-CheckBoxGroup.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:${direction};-ms-flex-direction:${direction};flex-direction:${direction};-webkit-flex-wrap:${wrap};-ms-flex-wrap:${wrap};flex-wrap:${wrap};-webkit-box-pack:${handleJustify()};-webkit-justify-content:${handleJustify()};-ms-flex-pack:${handleJustify()};justify-content:${handleJustify()};-webkit-align-items:${handleAlign()};-webkit-box-align:${handleAlign()};-ms-flex-align:${handleAlign()};align-items:${handleAlign()};width:${fullWidth ? "100%" : "max-content"};}.Wps-CheckBoxGroup.__jsx-style-dynamic-selector .Wps-CheckBox:not(:last-child){${handleMargin()};}`
    }), childrenWithProps]
  });
};

exports.CheckBoxGroup = CheckBoxGroup;