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 { useStyle } from "../../../../../../../runtimes/react/use-style";
import { cx } from "@emotion/css";
import { useResponsiveStyle } from "../../../../../../utils/responsive-style";
function getCheckmarkColor({
  swatch: { hue: h, saturation: s, lightness: l },
  alpha: a
}) {
  return Color({ h, s, l }).alpha(a).isLight() ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.95)";
}
const FAKE_CHECKBOX_CLASS_NAME = "fake-checkbox";
function FakeCheckbox({ className, style, contrast, error }) {
  return /* @__PURE__ */ jsx(
    "div",
    {
      style,
      className: cx(
        FAKE_CHECKBOX_CLASS_NAME,
        useStyle({
          position: "absolute",
          width: "100%",
          height: "100%",
          borderStyle: "solid",
          borderRadius: 4,
          pointerEvents: "none",
          borderWidth: 1
        }),
        useStyle(
          useResponsiveStyle([contrast], ([contrast2 = Contrasts.LIGHT]) => ({
            borderColor: getContrastBorderColor(contrast2, error),
            backgroundColor: getContrastBackgroundColor(contrast2)
          }))
        ),
        className
      )
    }
  );
}
const HiddenCheckbox = forwardRef(function HiddenCheckbox2({ size, brandColor, contrast, error, className, ...restOfProps }, ref) {
  return /* @__PURE__ */ jsx(
    "input",
    {
      ...restOfProps,
      ref,
      className: cx(
        useStyle({
          position: "absolute",
          opacity: 0,
          width: "100%",
          height: "100%",
          cursor: "pointer",
          "&:disabled": {
            cursor: "no-drop",
            [`& ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
              opacity: 0.5
            }
          },
          [`&:checked ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: {
            ...useResponsiveStyle(
              [brandColor],
              ([{ swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}]) => ({
                backgroundColor: colorToString({ swatch, alpha })
              })
            ),
            borderColor: "transparent",
            "&::after": {
              content: '""',
              position: "absolute",
              boxSizing: "content-box",
              width: "25%",
              height: "50%",
              borderStyle: "solid",
              ...useResponsiveStyle(
                [size, brandColor],
                ([
                  size2 = Sizes.MEDIUM,
                  { swatch = { hue: 0, saturation: 0, lightness: 0 }, alpha = 1 } = {}
                ]) => ({
                  borderWidth: getSize(size2) * 0.1,
                  borderLeft: 0,
                  borderTop: 0,
                  borderColor: getCheckmarkColor({ swatch, alpha })
                })
              ),
              transform: "rotate(45deg) translate3d(91%, -23%, 0)"
            }
          },
          "&:not(:disabled)": {
            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(
              [brandColor],
              ([brandColor2 = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({
                borderColor: colorToString(brandColor2)
              })
            )
          },
          "&:not(:disabled):checked": {
            [`&:focus ~ .${FAKE_CHECKBOX_CLASS_NAME}`]: useResponsiveStyle(
              [contrast],
              ([contrast2 = Contrasts.LIGHT]) => ({
                borderColor: getContrastBorderColor(contrast2, error)
              })
            )
          }
        }),
        className
      )
    }
  );
});
var Checkbox_default = forwardRef(function Checkbox({ error, className, style, form, ...restOfProps }, ref) {
  const { size, contrast, brandColor } = useFormContext();
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cx(
        useStyle({ position: "relative" }),
        useStyle(
          useResponsiveStyle([size], ([size2 = Sizes.MEDIUM]) => ({
            height: getSize(size2),
            width: getSize(size2)
          }))
        )
      ),
      children: [
        /* @__PURE__ */ jsx(
          HiddenCheckbox,
          {
            ...restOfProps,
            type: "checkbox",
            ref,
            error,
            size,
            contrast,
            brandColor
          }
        ),
        /* @__PURE__ */ jsx(FakeCheckbox, { className, error, contrast, style })
      ]
    }
  );
});
export {
  Checkbox_default as default
};
//# sourceMappingURL=index.js.map