import { c as _c } from "react/compiler-runtime";
import * as stylex from "@stylexjs/stylex";
import { memo } from "react";
import { color, controlWeight, font, fontSize, size } from "./tokens.stylex";
import ToggleSliderInput from "./ToggleSliderInput";
const CAN_HOVER = "@media (hover: hover)";
const styles = stylex.create({
  list: {
    width: "100%",
    padding: "0",
    margin: "0",
    display: "flex",
    flexDirection: "column"
  },
  noBorder: {
    borderStyle: "none"
  },
  item: {
    backgroundColor: color.gray500,
    borderBottomWidth: {
      default: "0px",
      ":not(:last-child)": "1px"
    },
    borderBottomStyle: {
      default: "none",
      ":not(:last-child)": "solid"
    },
    borderBottomColor: {
      default: "transparent",
      ":not(:last-child)": color.gray400
    }
  },
  text: {
    padding: size.px4
  },
  heading: {
    backgroundColor: color.transparent
  },
  critical: {
    color: color.red150
  },
  stack: {
    display: "flex",
    flexDirection: "column",
    gap: size.px4,
    width: "100%"
  },
  labelContent: {
    flex: "1"
  },
  buttonColumns: {
    display: "flex",
    gap: size.px4,
    width: "100%"
  },
  buttonBase: {
    fontFamily: font.main,
    fontSize: fontSize.body,
    fontWeight: controlWeight.button,
    // TODO: color

    padding: size.px4,
    display: "flex",
    alignItems: "center",
    gap: size.px4,
    cursor: "pointer",
    backgroundColor: {
      default: color.gray500,
      ":active": color.gray400,
      [CAN_HOVER]: {
        ":hover": color.gray400
      }
    }
  },
  icon: {
    display: "flex",
    fontSize: "120%" // TODO: ASK-UX proportional icon size?
  },
  columnButton: {
    flexDirection: "column",
    flex: "1",
    cursor: "pointer",
    backgroundColor: {
      default: color.gray500,
      ":active": color.gray400,
      [CAN_HOVER]: {
        ":hover": color.gray400
      }
    }
  },
  largeIcon: {
    display: "flex",
    fontSize: "150%" // TODO: ASK-UX proportional icon size?
  },
  disabled: {}
});
/**
 * @remarks The drawer components are meant to be used in a <BottomDrawer /> for mobile only.
 * 			Do not use them in other contexts. Especially not on desktop.
 */
export const DrawerList = memo(function DrawerList(t0) {
  const $ = _c(3);
  const {
    children
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = stylex.props(styles.list);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== children) {
    t2 = <div {...t1}>{children}</div>;
    $[1] = children;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
});
/**
 * @remarks The drawer components are meant to be used in a <BottomDrawer /> for mobile only.
 * 			Do not use them in other contexts. Especially not on desktop.
 */
export const DrawerListItem = memo(function DrawerListItem(t0) {
  const $ = _c(3);
  const {
    children
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = stylex.props(styles.noBorder, styles.item);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== children) {
    t2 = <div {...t1}>{children}</div>;
    $[1] = children;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
});
/**
 * @remarks The drawer components are meant to be used in a <BottomDrawer /> for mobile only.
 * 			Do not use them in other contexts. Especially not on desktop.
 */
export const DrawerListTextItem = memo(function DrawerListTextItem(t0) {
  const $ = _c(5);
  const {
    heading,
    children
  } = t0;
  let t1;
  if ($[0] !== heading) {
    t1 = stylex.props(styles.noBorder, styles.item, styles.text, heading && styles.heading);
    $[0] = heading;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  let t2;
  if ($[2] !== children || $[3] !== t1) {
    t2 = <div {...t1}>{children}</div>;
    $[2] = children;
    $[3] = t1;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  return t2;
});

/**
 * @remarks The drawer components are meant to be used in a <BottomDrawer /> for mobile only.
 * 			Do not use them in other contexts. Especially not on desktop.
 */

/**
 * @remarks The drawer components are meant to be used in a <BottomDrawer /> for mobile only.
 * 			Do not use them in other contexts. Especially not on desktop.
 */
export const DrawerListButtonItem = memo(function DrawerListTextItem(t0) {
  const $ = _c(11);
  const {
    type,
    role,
    icon,
    onClick,
    critical,
    children
  } = t0;
  const t1 = type ?? "button";
  let t2;
  if ($[0] !== critical) {
    t2 = stylex.props(styles.noBorder, styles.item, styles.buttonBase, critical && styles.critical);
    $[0] = critical;
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  let t3;
  if ($[2] !== icon) {
    t3 = icon && <span {...stylex.props(styles.icon)}>{icon}</span>;
    $[2] = icon;
    $[3] = t3;
  } else {
    t3 = $[3];
  }
  let t4;
  if ($[4] !== children || $[5] !== onClick || $[6] !== role || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
    t4 = <button type={t1} role={role} {...t2} onClick={onClick}>{t3}{children}</button>;
    $[4] = children;
    $[5] = onClick;
    $[6] = role;
    $[7] = t1;
    $[8] = t2;
    $[9] = t3;
    $[10] = t4;
  } else {
    t4 = $[10];
  }
  return t4;
});
/**
 * @remarks The drawer components are meant to be used in a <BottomDrawer /> for mobile only.
 * 			Do not use them in other contexts. Especially not on desktop.
 */
export const DrawerStack = memo(function DrawerStack(t0) {
  const $ = _c(3);
  const {
    children
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = stylex.props(styles.stack);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== children) {
    t2 = <div {...t1}>{children}</div>;
    $[1] = children;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
});
/**
 * @remarks The drawer components are meant to be used in a <BottomDrawer /> for mobile only.
 * 			Do not use them in other contexts. Especially not on desktop.
 */
export const DrawerButtonColumn = memo(function DrawerButtonColumn(t0) {
  const $ = _c(3);
  const {
    children
  } = t0;
  let t1;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t1 = stylex.props(styles.buttonColumns);
    $[0] = t1;
  } else {
    t1 = $[0];
  }
  let t2;
  if ($[1] !== children) {
    t2 = <div {...t1}>{children}</div>;
    $[1] = children;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  return t2;
});
/**
 * @remarks The drawer components are meant to be used in a <BottomDrawer /> for mobile only.
 * 			Do not use them in other contexts. Especially not on desktop.
 */
export const DrawerButton = memo(function DrawerButton(t0) {
  const $ = _c(11);
  const {
    icon,
    type,
    role,
    onClick,
    critical,
    text
  } = t0;
  const t1 = type ?? "button";
  let t2;
  if ($[0] !== critical) {
    t2 = stylex.props(styles.noBorder, styles.buttonBase, styles.columnButton, critical && styles.critical);
    $[0] = critical;
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  let t3;
  if ($[2] !== icon) {
    t3 = icon && <span {...stylex.props(styles.largeIcon)}>{icon}</span>;
    $[2] = icon;
    $[3] = t3;
  } else {
    t3 = $[3];
  }
  let t4;
  if ($[4] !== onClick || $[5] !== role || $[6] !== t1 || $[7] !== t2 || $[8] !== t3 || $[9] !== text) {
    t4 = <button type={t1} role={role} onClick={onClick} {...t2}>{t3}{text}</button>;
    $[4] = onClick;
    $[5] = role;
    $[6] = t1;
    $[7] = t2;
    $[8] = t3;
    $[9] = text;
    $[10] = t4;
  } else {
    t4 = $[10];
  }
  return t4;
});
/**
 * @remarks The drawer components are meant to be used in a <BottomDrawer /> for mobile only.
 * 			Do not use them in other contexts. Especially not on desktop.
 */
export const DrawerListToggleSwitchItem = memo(function DrawerListToggleItem(t0) {
  const $ = _c(19);
  const {
    label,
    name,
    icon,
    disabled,
    defaultChecked,
    value,
    onChange
  } = t0;
  let t1;
  if ($[0] !== disabled) {
    t1 = stylex.props(styles.noBorder, styles.item, styles.buttonBase, disabled && styles.disabled);
    $[0] = disabled;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  let t2;
  if ($[2] !== icon) {
    t2 = icon && <span {...stylex.props(styles.icon)}>{icon}</span>;
    $[2] = icon;
    $[3] = t2;
  } else {
    t2 = $[3];
  }
  let t3;
  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = stylex.props(styles.labelContent);
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  let t4;
  if ($[5] !== label) {
    t4 = <span {...t3}>{label}</span>;
    $[5] = label;
    $[6] = t4;
  } else {
    t4 = $[6];
  }
  let t5;
  if ($[7] !== defaultChecked || $[8] !== disabled || $[9] !== label || $[10] !== name || $[11] !== onChange || $[12] !== value) {
    t5 = <ToggleSliderInput defaultChecked={defaultChecked} disabled={disabled} name={name} onChange={onChange} value={value} title={label} />;
    $[7] = defaultChecked;
    $[8] = disabled;
    $[9] = label;
    $[10] = name;
    $[11] = onChange;
    $[12] = value;
    $[13] = t5;
  } else {
    t5 = $[13];
  }
  let t6;
  if ($[14] !== t1 || $[15] !== t2 || $[16] !== t4 || $[17] !== t5) {
    t6 = <label {...t1}>{t2}{t4}{t5}</label>;
    $[14] = t1;
    $[15] = t2;
    $[16] = t4;
    $[17] = t5;
    $[18] = t6;
  } else {
    t6 = $[18];
  }
  return t6;
});
//# sourceMappingURL=DrawerList.jsx.map