"use strict";
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const styles_lib_components_Button_Button_cjs = require("../Button/Button.cjs");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
const styles_lib_components_private_touchable_virtualTouchable_cjs = require("../private/touchable/virtualTouchable.cjs");
const styles_lib_components_Box_BackgroundContext_cjs = require("../Box/BackgroundContext.cjs");
const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
const styles_lib_components_Toggle_Toggle_css_cjs = require("./Toggle.css.cjs");
const handleChange = (onChange) => (event) => {
  if (typeof onChange === "function") {
    onChange(event.target.checked);
  }
};
const Toggle = React.forwardRef(
  ({
    id,
    on,
    onChange,
    label,
    align = "left",
    size = "standard",
    data,
    ...restProps
  }, forwardedRef) => {
    const lightness = styles_lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
    return /* @__PURE__ */ jsxRuntime.jsxs(
      styles_lib_components_Box_Box_cjs.Box,
      {
        position: "relative",
        zIndex: 0,
        display: "flex",
        flexDirection: align === "left" ? void 0 : "rowReverse",
        className: styles_lib_components_Toggle_Toggle_css_cjs.root,
        ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            styles_lib_components_Box_Box_cjs.Box,
            {
              component: "input",
              type: "checkbox",
              id,
              checked: on,
              onChange: handleChange(onChange),
              position: "absolute",
              zIndex: 1,
              cursor: "pointer",
              opacity: 0,
              className: [
                styles_lib_components_Toggle_Toggle_css_cjs.realField,
                styles_lib_components_Toggle_Toggle_css_cjs.realFieldPosition[size],
                styles_lib_components_Toggle_Toggle_css_cjs.fieldSize[size]
              ],
              ref: forwardedRef
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs(
            styles_lib_components_Box_Box_cjs.Box,
            {
              position: "relative",
              display: "flex",
              alignItems: "center",
              flexShrink: 0,
              className: [
                styles_lib_components_Toggle_Toggle_css_cjs.slideContainer,
                styles_lib_components_Toggle_Toggle_css_cjs.slideContainerSize[size],
                styles_lib_components_Toggle_Toggle_css_cjs.fieldSize[size]
              ],
              children: [
                /* @__PURE__ */ jsxRuntime.jsx(
                  styles_lib_components_Box_Box_cjs.Box,
                  {
                    position: "absolute",
                    width: "full",
                    overflow: "hidden",
                    borderRadius: "full",
                    className: [
                      styles_lib_components_Toggle_Toggle_css_cjs.slideTrack[size],
                      styles_lib_components_Toggle_Toggle_css_cjs.slideTrackMask,
                      styles_lib_components_Toggle_Toggle_css_cjs.slideTrackBgLightMode[lightness.lightMode],
                      styles_lib_components_Toggle_Toggle_css_cjs.slideTrackBgDarkMode[lightness.darkMode]
                    ],
                    children: /* @__PURE__ */ jsxRuntime.jsx(
                      styles_lib_components_Box_Box_cjs.Box,
                      {
                        position: "absolute",
                        width: "full",
                        height: "full",
                        background: "formAccent",
                        transition: "fast",
                        className: styles_lib_components_Toggle_Toggle_css_cjs.slideTrackSelected
                      }
                    )
                  }
                ),
                /* @__PURE__ */ jsxRuntime.jsxs(
                  styles_lib_components_Box_Box_cjs.Box,
                  {
                    position: "absolute",
                    background: "surface",
                    transition: "fast",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    borderRadius: "full",
                    className: styles_lib_components_Toggle_Toggle_css_cjs.slider[size],
                    children: [
                      /* @__PURE__ */ jsxRuntime.jsx(
                        styles_lib_components_Button_Button_cjs.FieldOverlay,
                        {
                          variant: on ? "formAccent" : "default",
                          borderRadius: "full",
                          visible: true,
                          className: {
                            [styles_lib_components_Toggle_Toggle_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
                          }
                        }
                      ),
                      /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Button_Button_cjs.FieldOverlay, { className: styles_lib_components_Toggle_Toggle_css_cjs.icon, children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconTick, { tone: "formAccent", size: "fill" }) }),
                      /* @__PURE__ */ jsxRuntime.jsx(
                        styles_lib_components_Button_Button_cjs.FieldOverlay,
                        {
                          variant: "focus",
                          borderRadius: "full",
                          className: styles_lib_components_Toggle_Toggle_css_cjs.focusOverlay
                        }
                      ),
                      /* @__PURE__ */ jsxRuntime.jsx(
                        styles_lib_components_Button_Button_cjs.FieldOverlay,
                        {
                          variant: "formAccent",
                          borderRadius: "full",
                          className: !on ? styles_lib_components_Toggle_Toggle_css_cjs.hoverOverlay : void 0
                        }
                      )
                    ]
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx(
            styles_lib_components_Box_Box_cjs.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: [styles_lib_components_Toggle_Toggle_css_cjs.label[size], styles_lib_components_private_touchable_virtualTouchable_cjs.virtualTouchable()],
              children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { baseline: false, weight: on ? "strong" : void 0, size, children: label })
            }
          )
        ]
      }
    );
  }
);
exports.Toggle = Toggle;
