"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { useRef, useState } from "react";
import { Dropdown } from "../Dropdown/Dropdown.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
import { buildBorder } from "../../tokens/utils.js";
import { Spacing } from "../../tokens/Spacing.js";
import { Text } from "../../atoms/Text/Text.js";
import { Icon } from "../../atoms/Icon/Icon.js";
const triggerStyles = {
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  width: "100%",
  height: "64px",
  p: Spacing["16px"],
  backgroundColor: "White4",
  color: "White88",
  border: buildBorder("White8"),
  borderRadius: BorderRadius.S,
  cursor: "pointer",
  transition: "border 0.3s ease, background-color 0.3s ease",
  "&:hover": {
    backgroundColor: "White8",
    borderColor: "White16",
    color: "White"
  },
  "&:focus": {
    backgroundColor: "Purple8",
    borderColor: "Purple88",
    outlineOffset: 0
  },
  "&:focus:hover": {
    borderColor: "Purple"
  },
  '&:is(:disabled, [aria-disabled="true"])': {
    backgroundColor: "White4"
  }
};
function Select({
  defaultValue,
  value,
  renderValue = (x) => x,
  placeholder,
  children,
  onChange,
  name,
  ...rest
}) {
  const triggerRef = useRef(null);
  const [menuWidth, setMenuWidth] = useState();
  const [innerValue, setInnerValue] = useState(defaultValue);
  const anyValue = value ?? innerValue;
  return /* @__PURE__ */ jsxs(
    Dropdown,
    {
      type: "select",
      value: anyValue,
      onValueChange: (newValue) => {
        onChange == null ? void 0 : onChange(newValue);
        setInnerValue(newValue);
      },
      onOpenChange: (open) => {
        const trigger = triggerRef.current;
        if (open && trigger) {
          setMenuWidth(window.getComputedStyle(trigger).width);
        }
      },
      children: [
        /* @__PURE__ */ jsxs(Dropdown.Button, { ref: triggerRef, sx: triggerStyles, ...rest, children: [
          /* @__PURE__ */ jsx(Text.P16, { color: anyValue ? null : "White32", children: anyValue ? renderValue(anyValue) : placeholder }),
          /* @__PURE__ */ jsx("span", { sx: { flex: "1 1 auto" } }),
          /* @__PURE__ */ jsx(Icon.CaretDown, { size: "16px" })
        ] }),
        /* @__PURE__ */ jsx(Dropdown.Menu, { align: "start", style: { width: menuWidth }, children }),
        /* @__PURE__ */ jsx("input", { type: "hidden", className: "sr-only", name, value: anyValue || "", onChange: () => {
        } })
      ]
    }
  );
}
Select.Option = Dropdown.Menu.Item;
export {
  Select
};
