import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import Color from "color";
import { getSizeHeight as getSize } from "../Label";
import { useFormContext, Sizes, Contrasts } from "../../../../context/FormContext";
import { getContrastBorderColor, getContrastBackgroundColor } from "../../services/responsiveField";
import { colorToString } from "../../../../../../utils/colorToString";
import { cx } from "@emotion/css";
import { useResponsiveStyle } from "../../../../../../utils/responsive-style";
import { useStyle } from "../../../../../../../runtimes/react/use-style";
function getCheckmarkColor({
  swatch: { hue: h, saturation: s, lightness: l } = { hue: 0, saturation: 0, lightness: 0 },
  alpha: a = 1
}) {
  return Color({ h, s, l }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
}
function Container({ size, className, ...restOfProps }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(
        useStyle({ position: "relative" }),
        useStyle(
          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
            height: getSize(size2),
            width: getSize(size2)
          }))
        ),
        className
      )
    }
  );
}
const FAKE_RADIO_BUTTON_CLASS_NAME = "fake-radio-button";
function FakeRadioButton({ className, contrast, error, ...restOfProps }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...restOfProps,
      className: cx(
        FAKE_RADIO_BUTTON_CLASS_NAME,
        useStyle({
          position: "absolute",
          width: "100%",
          height: "100%",
          borderStyle: "solid",
          borderRadius: "50%",
          pointerEvents: "none",
          borderWidth: 1
        }),
        useStyle(
          useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
            borderColor: getContrastBorderColor(contrast2, error),
            backgroundColor: getContrastBackgroundColor(contrast2)
          }))
        ),
        className
      )
    }
  );
}
const HiddenRadioButton = forwardRef(function HiddenRadioButton2({ className, brandColor, contrast, error, ...restOfProps }, ref) {
  return /* @__PURE__ */ jsx(
    "input",
    {
      ...restOfProps,
      type: "radio",
      className: cx(
        useStyle({
          position: "absolute",
          opacity: 0,
          width: "100%",
          height: "100%",
          cursor: "pointer",
          "&:disabled": {
            cursor: "no-drop",
            [`& ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {
              opacity: 0.5
            }
          },
          [`&:checked ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: {
            ...useResponsiveStyle(
              [brandColor],
              ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
                backgroundColor: colorToString(brandColor2)
              })
            ),
            borderColor: "transparent",
            "&::after": {
              content: '""',
              position: "absolute",
              boxSizing: "content-box",
              top: "50%",
              left: "50%",
              width: "50%",
              height: "50%",
              borderRadius: "50%",
              transform: "translate(-50%, -50%)",
              ...useResponsiveStyle(
                [brandColor],
                ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
                  backgroundColor: getCheckmarkColor(brandColor2)
                })
              )
            }
          },
          "&:not(:disabled)": {
            [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle(
              [brandColor],
              ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
                borderColor: colorToString(brandColor2)
              })
            )
          },
          "&:not(:disabled):checked": {
            [`&:focus ~ .${FAKE_RADIO_BUTTON_CLASS_NAME}`]: useResponsiveStyle(
              [contrast],
              ([contrast2 = Contrasts.LIGHT]) => ({
                borderColor: getContrastBorderColor(contrast2, error)
              })
            )
          }
        }),
        className
      ),
      ref
    }
  );
});
var RadioButton_default = forwardRef(function RadioButton({ error, className, style, form, ...restOfProps }, ref) {
  const { size, contrast, brandColor } = useFormContext();
  return /* @__PURE__ */ jsxs(Container, { size, children: [
    /* @__PURE__ */ jsx(
      HiddenRadioButton,
      {
        ...restOfProps,
        ref,
        error,
        contrast,
        brandColor
      }
    ),
    /* @__PURE__ */ jsx(FakeRadioButton, { className, error, contrast, style })
  ] });
});
export {
  RadioButton_default as default
};
//# sourceMappingURL=index.js.map