import { jsxs, jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { Box } from "../Box/Box.mjs";
import { FieldOverlay } from "../Button/Button.mjs";
import { IconTick, Text } from "../Accordion/AccordionItem.mjs";
import { virtualTouchable } from "../private/touchable/virtualTouchable.mjs";
import { useBackgroundLightness } from "../Box/BackgroundContext.mjs";
import { buildDataAttributes } from "../Accordion/Accordion.mjs";
import { root, realField, realFieldPosition, fieldSize, slideContainer, slideContainerSize, slideTrack, slideTrackMask, slideTrackBgLightMode, slideTrackBgDarkMode, slideTrackSelected, slider, hideBorderOnDarkBackgroundInLightMode, icon, focusOverlay, hoverOverlay, label } from "./Toggle.css.mjs";
const handleChange = (onChange) => (event) => {
  if (typeof onChange === "function") {
    onChange(event.target.checked);
  }
};
const Toggle = forwardRef(
  ({
    id,
    on,
    onChange,
    label: label$1,
    align = "left",
    size = "standard",
    data,
    ...restProps
  }, forwardedRef) => {
    const lightness = useBackgroundLightness();
    return /* @__PURE__ */ jsxs(
      Box,
      {
        position: "relative",
        zIndex: 0,
        display: "flex",
        flexDirection: align === "left" ? void 0 : "rowReverse",
        className: root,
        ...buildDataAttributes({ data, validateRestProps: restProps }),
        children: [
          /* @__PURE__ */ jsx(
            Box,
            {
              component: "input",
              type: "checkbox",
              id,
              checked: on,
              onChange: handleChange(onChange),
              position: "absolute",
              zIndex: 1,
              cursor: "pointer",
              opacity: 0,
              className: [
                realField,
                realFieldPosition[size],
                fieldSize[size]
              ],
              ref: forwardedRef
            }
          ),
          /* @__PURE__ */ jsxs(
            Box,
            {
              position: "relative",
              display: "flex",
              alignItems: "center",
              flexShrink: 0,
              className: [
                slideContainer,
                slideContainerSize[size],
                fieldSize[size]
              ],
              children: [
                /* @__PURE__ */ jsx(
                  Box,
                  {
                    position: "absolute",
                    width: "full",
                    overflow: "hidden",
                    borderRadius: "full",
                    className: [
                      slideTrack[size],
                      slideTrackMask,
                      slideTrackBgLightMode[lightness.lightMode],
                      slideTrackBgDarkMode[lightness.darkMode]
                    ],
                    children: /* @__PURE__ */ jsx(
                      Box,
                      {
                        position: "absolute",
                        width: "full",
                        height: "full",
                        background: "formAccent",
                        transition: "fast",
                        className: slideTrackSelected
                      }
                    )
                  }
                ),
                /* @__PURE__ */ jsxs(
                  Box,
                  {
                    position: "absolute",
                    background: "surface",
                    transition: "fast",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    borderRadius: "full",
                    className: slider[size],
                    children: [
                      /* @__PURE__ */ jsx(
                        FieldOverlay,
                        {
                          variant: on ? "formAccent" : "default",
                          borderRadius: "full",
                          visible: true,
                          className: {
                            [hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
                          }
                        }
                      ),
                      /* @__PURE__ */ jsx(FieldOverlay, { className: icon, children: /* @__PURE__ */ jsx(IconTick, { tone: "formAccent", size: "fill" }) }),
                      /* @__PURE__ */ jsx(
                        FieldOverlay,
                        {
                          variant: "focus",
                          borderRadius: "full",
                          className: focusOverlay
                        }
                      ),
                      /* @__PURE__ */ jsx(
                        FieldOverlay,
                        {
                          variant: "formAccent",
                          borderRadius: "full",
                          className: !on ? hoverOverlay : void 0
                        }
                      )
                    ]
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ jsx(
            Box,
            {
              component: "label",
              htmlFor: id,
              paddingLeft: align === "left" ? "xsmall" : void 0,
              paddingRight: align === "right" || align === "justify" ? "xsmall" : void 0,
              flexGrow: align === "justify" ? 1 : void 0,
              userSelect: "none",
              cursor: "pointer",
              className: [label[size], virtualTouchable()],
              children: /* @__PURE__ */ jsx(Text, { baseline: false, weight: on ? "strong" : void 0, size, children: label$1 })
            }
          )
        ]
      }
    );
  }
);
export {
  Toggle
};
