"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Select } from "@base-ui-components/react/select";
import { Slot } from "@radix-ui/react-slot";
import { forwardRef } from "react";
import { ExperimentalMenu } from "./Menu.js";
import { ExperimentalNavLink } from "./NavLink.js";
import { Translate } from "../icons/Translate.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { useI18n } from "../i18n/useI18n.js";
import { CaretDownInteractive } from "../icons/CaretDownInteractive.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalLocaleSwitcher = forwardRef(
  ({
    displayFormat,
    menuAlign = "center",
    variant,
    iconBefore,
    iconAfter,
    highlightOnInteraction = true,
    className,
    style,
    children,
    ...props
  }, ref) => {
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("locale-switcher", { displayFormat });
    const { t, localeDetails, setLocale, supportedLocales, supportedLocalesDetails } = useI18n();
    const trigger = children ? /* @__PURE__ */ jsx(Slot, { ...props, children: typeof children === "function" ? children({ localeDetails }) : children }) : /* @__PURE__ */ jsxs(
      ExperimentalNavLink,
      {
        variant,
        iconBefore: iconBefore !== void 0 ? iconBefore : /* @__PURE__ */ jsx(Translate, { alt: t("components.localeSwitcher.language") }),
        iconAfter: iconAfter !== void 0 ? iconAfter : /* @__PURE__ */ jsx(CaretDownInteractive, {}),
        highlightOnInteraction,
        ...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__ */ jsxs(
      "div",
      {
        ref,
        className: classNames(["gds-locale-switcher", className]),
        ...getCSSPropsAttributes("locale-switcher", { displayFormat }, style),
        ...polyfillAttributes,
        children: [
          polyfillElement,
          /* @__PURE__ */ jsxs(Select.Root, { value: localeDetails.locale, onValueChange: setLocale, alignItemToTrigger: false, modal: false, children: [
            /* @__PURE__ */ jsx(Select.Trigger, { render: trigger }),
            /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(
              Select.Positioner,
              {
                align: menuAlign,
                sideOffset: 8,
                alignOffset: !children && menuAlign !== "center" ? -8 : void 0,
                collisionPadding: 8,
                positionMethod: "fixed",
                children: /* @__PURE__ */ jsx(
                  Select.Popup,
                  {
                    render: /* @__PURE__ */ jsx(
                      ExperimentalMenu,
                      {
                        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(ExperimentalMenu.Item, { children: supportedLocaleDetails.displayName })
                            },
                            supportedLocale
                          );
                        })
                      }
                    )
                  }
                )
              }
            ) })
          ] })
        ]
      }
    );
  }
);
ExperimentalLocaleSwitcher.displayName = "ExperimentalLocaleSwitcher";
export {
  ExperimentalLocaleSwitcher
};
