"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Listbox, ListboxButton, ListboxSelectedOption, ListboxOptions, ListboxOption } from "@headlessui/react";
import { forwardRef, Fragment } from "react";
import { ExperimentalBaseField, ExperimentalBaseFieldBox } from "./BaseField.js";
import { ExperimentalLegacyMenu } from "./LegacyMenu.js";
import { genericForwardRef } from "../utils/genericForwardRef.js";
import { useControlled } from "./hooks/useControlled.js";
import { classNames } from "../utils/classNames.js";
import { CaretDownInteractive } from "../icons/CaretDownInteractive.js";
const ExperimentalSelectRoot = genericForwardRef(
  ({
    size,
    label,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy,
    description,
    placeholder,
    name,
    value: controlledValue,
    defaultValue,
    onChange,
    valueIdKey,
    valueLabel,
    disabled = false,
    status,
    message,
    className,
    children,
    ...props
  }, forwardedRef) => {
    if (!valueIdKey && (typeof controlledValue === "object" && controlledValue !== null || typeof defaultValue === "object" && defaultValue !== null)) {
      throw new Error("ExperimentalSelect: `valueIdKey` is required when `value` or `defaultValue` is an object");
    }
    const [value, setValue] = useControlled(controlledValue, defaultValue ?? null, onChange);
    return /* @__PURE__ */ jsx(
      ExperimentalBaseField,
      {
        size,
        label,
        "aria-label": ariaLabel,
        "aria-labelledby": ariaLabelledBy,
        description,
        placeholder,
        value: { optionValue: value },
        disabled,
        status,
        message,
        "data-name": name,
        "data-value": value,
        className: classNames(["gds-select", className]),
        children: ({ fieldProps }) => /* @__PURE__ */ jsxs(Listbox, { name, value, onChange: setValue, by: valueIdKey, disabled, children: [
          /* @__PURE__ */ jsx(ExperimentalBaseFieldBox, { children: /* @__PURE__ */ jsx(ListboxButton, { as: Fragment, children: /* @__PURE__ */ jsxs(
            "button",
            {
              ref: forwardedRef,
              type: "button",
              "data-placeholder-shown": value === null || void 0,
              className: `
                    nested/field flex w-full items-center outline-none
                    @prop-size-small/field:h-8
                    @prop-size-small/field:gap-1.5
                    @prop-size-small/field:p-2
                    @prop-size-medium/field:h-10
                    @prop-size-medium/field:gap-2
                    @prop-size-medium/field:p-3
                    @prop-size-large/field:h-12
                    @prop-size-large/field:gap-2.5
                    @prop-size-large/field:p-3
                  `,
              ...fieldProps,
              ...props,
              children: [
                valueLabel !== void 0 ? /* @__PURE__ */ jsx("span", { className: "truncate", children: valueLabel }) : /* @__PURE__ */ jsx("span", { className: "truncate not-first:*:hidden", children: /* @__PURE__ */ jsx(
                  ListboxSelectedOption,
                  {
                    options: children,
                    placeholder: /* @__PURE__ */ jsx("span", { className: "text-placeholder", children: placeholder })
                  }
                ) }),
                /* @__PURE__ */ jsx(
                  CaretDownInteractive,
                  {
                    className: `
                      ms-auto
                      @prop-size-small/field:size-3.5
                      @prop-size-medium/field:size-4
                      @prop-size-large/field:size-4.5
                    `
                  }
                )
              ]
            }
          ) }) }),
          /* @__PURE__ */ jsx(ListboxOptions, { as: Fragment, anchor: { to: "bottom start" }, modal: false, transition: true, children: /* @__PURE__ */ jsx(
            ExperimentalLegacyMenu,
            {
              className: `
                  w-[var(--button-width)] transition outline-none [--anchor-gap:theme(spacing.1)] [--anchor-padding:theme(spacing.2)]
                  data-[closed]:-translate-y-1
                  data-[closed]:data-[anchor~=top]:translate-y-1
                  data-[closed]:opacity-0
                `,
              children
            }
          ) })
        ] })
      }
    );
  }
);
ExperimentalSelectRoot.displayName = "ExperimentalSelect";
const ExperimentalSelectOption = forwardRef(
  ({ value: passedValue, children, ...props }, forwardedRef) => {
    const value = passedValue !== void 0 ? passedValue : children;
    return /* @__PURE__ */ jsx(ListboxOption, { ref: forwardedRef, as: Fragment, value, children: ({ focus, selected, selectedOption }) => {
      return selectedOption ? /* @__PURE__ */ jsx("span", { children }) : /* @__PURE__ */ jsx(ExperimentalLegacyMenu.Item, { focus, selected, ...props, children });
    } });
  }
);
ExperimentalSelectOption.displayName = "ExperimentalSelect.Option";
export {
  ExperimentalSelectOption,
  ExperimentalSelectRoot
};
