import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo, useCallback, useState } from "react";
import { sliderConfig, switchConfig } from "./ToggleSliderInput.vars.stylex";
import { interaction } from "./mixins";
import { controlColor } from "./theme.stylex";
import { color, duration, timingFunction } from "./tokens.stylex";
// Box around the slider
// Loosely based on:
// https://www.w3schools.com/howto/howto_css_switch.asp
// https://kittygiraudel.com/2021/04/05/an-accessible-toggle/#focused-styles
const switchStyle = stylex.create({
  base: {
    position: "relative",
    display: "inline-block",
    width: switchConfig.width,
    height: switchConfig.height
  }
});
const sliderStyle = stylex.create({
  base: {
    position: "absolute",
    inset: 0,
    borderRadius: switchConfig.width,
    transition: `background-color ${duration.default} ${timingFunction.fast}`,
    "::before": {
      position: "absolute",
      content: "''",
      height: sliderConfig.size,
      width: sliderConfig.size,
      left: sliderConfig.offset,
      bottom: sliderConfig.offset,
      borderRadius: "50%",
      transition: `
				transform ${duration.default} ${timingFunction.fast},
				background-color ${duration.default} ${timingFunction.fast}
			`
    }
  },
  off: {
    backgroundColor: color.gray400,
    "::before": {
      backgroundColor: color.gray000
    }
  },
  on: {
    backgroundColor: controlColor.toggleCheckedBackground,
    "::before": {
      transform: `translateX(${sliderConfig.translationOffset})`,
      backgroundColor: controlColor.toggleCheckedPillBackground
    }
  },
  disabledOff: {
    backgroundColor: color.gray400,
    "::before": {
      backgroundColor: color.gray100
    }
  },
  disabledOn: {
    backgroundColor: controlColor.toggleCheckedDisabledBackground,
    "::before": {
      transform: `translateX(${sliderConfig.translationOffset})`,
      backgroundColor: controlColor.toggleCheckedDisabledPillBackground
    }
  }
});

/** @remarks Exported for use in Drawer */
export default memo(function ToggleSliderInput(props) {
  const $ = _c(2);
  let t0;
  if ($[0] !== props) {
    t0 = props.value !== undefined && props.onChange !== undefined ? <InternalStateUncontrolledToggleSliderInput {...props} /> : <FakeUncontrolledToggleSliderInput {...props} />;
    $[0] = props;
    $[1] = t0;
  } else {
    t0 = $[1];
  }
  return t0;
});
const FakeUncontrolledToggleSliderInput = memo(function FakeUncontrolledToggleSliderInput(props) {
  const $ = _c(3);
  const [value, setValue] = useState(props.defaultChecked || false);
  let t0;
  if ($[0] !== props || $[1] !== value) {
    t0 = <InternalStateUncontrolledToggleSliderInput {...props} value={value} onChange={setValue} />;
    $[0] = props;
    $[1] = value;
    $[2] = t0;
  } else {
    t0 = $[2];
  }
  return t0;
});
// We need to split this up into a fake uncontrolled component because StyleX does not support styling using the input's `checked` state.
// See: https://github.com/facebook/stylex/issues/536
const InternalStateUncontrolledToggleSliderInput = memo(function FakeUncontrolledToggleSliderInput(t0) {
  const $ = _c(19);
  const {
    value,
    onChange,
    defaultChecked,
    disabled,
    name,
    title
  } = t0;
  let t1;
  if ($[0] !== onChange) {
    t1 = e => {
      onChange(e.target.checked);
    };
    $[0] = onChange;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const onChangeEffective = t1;
  let t2;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = stylex.props(switchStyle.base);
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  let t3;
  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = stylex.props(interaction.hideInput);
    $[3] = t3;
  } else {
    t3 = $[3];
  }
  let t4;
  if ($[4] !== defaultChecked || $[5] !== disabled || $[6] !== name || $[7] !== onChangeEffective || $[8] !== title || $[9] !== value) {
    t4 = <input type="checkbox" {...t3} name={name} checked={value} onChange={onChangeEffective} defaultChecked={defaultChecked} disabled={disabled} title={title} />;
    $[4] = defaultChecked;
    $[5] = disabled;
    $[6] = name;
    $[7] = onChangeEffective;
    $[8] = title;
    $[9] = value;
    $[10] = t4;
  } else {
    t4 = $[10];
  }
  let t5;
  if ($[11] !== disabled || $[12] !== value) {
    t5 = stylex.props(sliderStyle.base, disabled ? value ? sliderStyle.disabledOn : sliderStyle.disabledOff : value ? sliderStyle.on : sliderStyle.off);
    $[11] = disabled;
    $[12] = value;
    $[13] = t5;
  } else {
    t5 = $[13];
  }
  let t6;
  if ($[14] !== t5) {
    t6 = <span {...t5} />;
    $[14] = t5;
    $[15] = t6;
  } else {
    t6 = $[15];
  }
  let t7;
  if ($[16] !== t4 || $[17] !== t6) {
    t7 = <span {...t2}>{t4}{t6}</span>;
    $[16] = t4;
    $[17] = t6;
    $[18] = t7;
  } else {
    t7 = $[18];
  }
  return t7;
});
//# sourceMappingURL=ToggleSliderInput.jsx.map