"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Select } from "@base-ui-components/react/select";
import { forwardRef } from "react";
import { ExperimentalButton } from "./Button.js";
import { ExperimentalLegacyMenu } from "./LegacyMenu.js";
import { ExperimentalRender } from "./Render.js";
import { CaretDownInteractive } from "../icons/CaretDownInteractive.js";
import { Translate } from "../icons/Translate.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { useI18n } from "../i18n/useI18n.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalLocaleSwitcher = forwardRef(
  ({
    displayFormat,
    menuAlign = "center",
    iconBefore,
    iconAfter,
    className,
    style,
    children,
    ...props
  }, forwardedRef) => {
    const [propsPolyfillForwardedRef, propsPolyfillAttributes] = useCSSPropsPolyfill(
      "locale-switcher",
      { displayFormat },
      { ref: forwardedRef }
    );
    const { t, localeDetails, setLocale, supportedLocales, supportedLocalesDetails } = useI18n();
    const trigger = children ? /* @__PURE__ */ jsx(
      ExperimentalRender,
      {
        render: typeof children === "function" ? children({ localeDetails }) : children,
        ...props
      }
    ) : /* @__PURE__ */ jsxs(
      ExperimentalButton,
      {
        iconBefore: iconBefore !== void 0 ? iconBefore : /* @__PURE__ */ jsx(Translate, { alt: t("components.localeSwitcher.language") }),
        iconAfter: iconAfter !== void 0 ? iconAfter : /* @__PURE__ */ jsx(CaretDownInteractive, {}),
        className: "default-variant-tertiary",
        ...props,
        children: [
          /* @__PURE__ */ jsx("span", { className: "@prop-display-format-full/locale-switcher:hidden", children: localeDetails.shortName }),
          /* @__PURE__ */ jsx("span", { className: "@prop-display-format-short/locale-switcher:hidden", children: localeDetails.displayName })
        ]
      }
    );
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref: propsPolyfillForwardedRef,
        className: classNames([
          `gds-locale-switcher
          -:*:default-size-inherit
          -:*:prop-size-inherit
          -:*:default-variant-inherit
          -:*:prop-variant-inherit
          -:*:default-hide-label-inherit
          -:*:prop-hide-label-inherit`,
          className
        ]),
        ...getCSSPropsAttributes("locale-switcher", { displayFormat }, style),
        ...propsPolyfillAttributes,
        children: /* @__PURE__ */ jsxs(Select.Root, { value: localeDetails.locale, onValueChange: setLocale, modal: false, children: [
          /* @__PURE__ */ jsx(Select.Trigger, { render: trigger }),
          /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { alignItemWithTrigger: false, align: menuAlign, sideOffset: 8, collisionPadding: 8, children: /* @__PURE__ */ jsx(
            Select.Popup,
            {
              render: /* @__PURE__ */ jsx(
                ExperimentalLegacyMenu,
                {
                  className: `
                      max-h-[var(--available-height)] min-w-[min(var(--anchor-width),var(--available-width))] max-w-[var(--available-width)]
                      origin-[var(--transform-origin)] transition
                      data-[ending-style]:scale-95
                      data-[starting-style]:scale-95
                      data-[ending-style]:opacity-0
                      data-[starting-style]:opacity-0
                    `,
                  children: supportedLocales.map((supportedLocale) => {
                    const supportedLocaleDetails = supportedLocalesDetails[supportedLocale];
                    return /* @__PURE__ */ jsx(
                      Select.Item,
                      {
                        value: supportedLocale,
                        label: supportedLocaleDetails.displayName,
                        render: /* @__PURE__ */ jsx(ExperimentalLegacyMenu.Item, { children: supportedLocaleDetails.displayName })
                      },
                      supportedLocale
                    );
                  })
                }
              )
            }
          ) }) })
        ] })
      }
    );
  }
);
ExperimentalLocaleSwitcher.displayName = "ExperimentalLocaleSwitcher";
export {
  ExperimentalLocaleSwitcher
};
