import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const RadioGroup = props => {
  const theme = useTheme();
  const {
    color = null,
    textColor = null,
    size = null,
    onChange = () => {},
    align = "start",
    justify = "start",
    wrap = "nowrap",
    direction = "row",
    fullWidth = false,
    spacing = 1,
    defaultSelected = 0,
    children,
    className,
    ...otherProps
  } = props;
  const [selectedIndex, setSelectedIndex] = React.useState(defaultSelected);

  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) {
    setSelectedIndex(index);
    onChange(index);
  }

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

    return child;
  });
  return /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-RadioGroup",
    ...otherProps,
    className: _JSXStyle.dynamic([["3615588269", [direction, wrap, handleJustify(), handleAlign(), fullWidth ? "100%" : "max-content", handleMargin()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-RadioGroup", className) || ""),
    children: [/*#__PURE__*/_jsx(_JSXStyle, {
      id: "3615588269",
      dynamic: [direction, wrap, handleJustify(), handleAlign(), fullWidth ? "100%" : "max-content", handleMargin()],
      children: `.Wps-RadioGroup.__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-RadioGroup.__jsx-style-dynamic-selector .Wps-Radio:not(:last-child){${handleMargin()};}`
    }), childrenWithProps]
  });
};