import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { createElement, memo } from "react";
import ToggleSliderInput from "./ToggleSliderInput";
import { switchConfig } from "./ToggleSliderInput.vars.stylex";
import { a11y, interaction } from "./mixins";
import { color, fontSize, size, transition } from "./tokens.stylex";

// TODO: ASK-UX maybe something like this?
// https://alvarotrigo.com/blog/toggle-switch-css/

const styles = stylex.create({
  wrapper: {
    color: color.white900,
    cursor: "pointer",
    display: "grid",
    gridTemplateColumns: "auto 1fr",
    alignItems: "center",
    gap: `0 ${switchConfig.labelGap}`,
    transition: `${transition.a11yOutline}`
  },
  disabled: {
    cursor: "not-allowed",
    color: color.gray100
  },
  label: {
    textAlign: "left"
  },
  description: {
    fontSize: fontSize.sub,
    whiteSpace: "pre-line",
    textAlign: "left",
    color: color.gray100,
    gridColumn: "2"
  },
  stack: {
    display: "flex",
    flexDirection: "column",
    gap: size.px4
  }
});
export default memo(function ToggleSwitch(props) {
  const $ = _c(15);
  let t0;
  if ($[0] !== props.disabled) {
    t0 = stylex.props(interaction.disableTapHighlight, a11y.defaultOutline, styles.wrapper, props.disabled && styles.disabled);
    $[0] = props.disabled;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  const t1 = props.disabled;
  let t2;
  if ($[2] !== props) {
    t2 = <ToggleSliderInput {...props} />;
    $[2] = props;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  let t3;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = stylex.props(styles.label);
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  let t4;
  if ($[5] !== props.label) {
    t4 = <span {...t3}>{props.label}</span>;
    $[5] = props.label;
    $[6] = t4;
  } else {
    t4 = $[6];
  }
  let t5;
  if ($[7] !== props.description) {
    t5 = props.description && <span {...stylex.props(styles.description)}>{props.description}</span>;
    $[7] = props.description;
    $[8] = t5;
  } else {
    t5 = $[8];
  }
  let t6;
  if ($[9] !== props.disabled || $[10] !== t0 || $[11] !== t2 || $[12] !== t4 || $[13] !== t5) {
    t6 = <label {...t0} aria-disabled={t1}>{t2}{t4}{t5}</label>;
    $[9] = props.disabled;
    $[10] = t0;
    $[11] = t2;
    $[12] = t4;
    $[13] = t5;
    $[14] = t6;
  } else {
    t6 = $[14];
  }
  return t6;
});
export const ToggleSwitchStack = memo(function ToggleSwitchStack({
  children
}) {
  return createElement("div", stylex.props(styles.stack), children);
});
//# sourceMappingURL=ToggleSwitch.jsx.map