'use client';


import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
import { Container } from "../Container/index.mjs";
import { Input } from "../Input/Input.mjs";
import { DropDown } from "../DropDown/index.mjs";
import { MoveVertical } from "lucide-react";
import { useCallback, useMemo, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { getHTMLTextDir, getLocaleName } from "@intlayer/core";
import { useIntlayer } from "react-intlayer";
import { Locales } from "@intlayer/types";
import Fuse from "fuse.js";

//#region src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx
const DROPDOWN_IDENTIFIER = "locale-switcher";
const LocaleSwitcher = ({ locale, localeList, availableLocales, fullLocaleName = true, setLocale, panelProps }) => {
	let localeName = "Select a locale";
	const { switchTo, searchInput, languageListLabel } = useIntlayer("locale-switcher");
	const inputRef = useRef(null);
	const multilingualAvailableLocales = useMemo(() => localeList.map((localeEl) => {
		return {
			locale: localeEl,
			englishName: getLocaleName(localeEl, Locales.ENGLISH),
			currentLocaleName: getLocaleName(localeEl, locale),
			ownLocaleName: getLocaleName(localeEl)
		};
	}), [localeList, locale]);
	const [results, setResults] = useState(multilingualAvailableLocales);
	const fuse = useMemo(() => {
		return new Fuse(multilingualAvailableLocales, {
			keys: [
				{
					name: "ownLocaleName",
					weight: .4
				},
				{
					name: "englishName",
					weight: .2
				},
				{
					name: "currentLocaleName",
					weight: .2
				},
				{
					name: "locale",
					weight: .2
				}
			],
			threshold: .02
		});
	}, [multilingualAvailableLocales]);
	const handleSearch = useCallback((searchQuery) => {
		if (searchQuery) setResults(fuse.search(searchQuery).map((result) => result.item));
		else setResults(multilingualAvailableLocales);
	}, [fuse, multilingualAvailableLocales]);
	if (locale) localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();
	return /* @__PURE__ */ jsx("div", {
		className: "rounded-xl border border-text text-text transition-colors",
		"aria-label": localeSwitcherLabel.value,
		children: /* @__PURE__ */ jsxs(DropDown, {
			identifier: DROPDOWN_IDENTIFIER,
			children: [/* @__PURE__ */ jsx(DropDown.Trigger, {
				identifier: DROPDOWN_IDENTIFIER,
				children: /* @__PURE__ */ jsxs("div", {
					className: "flex w-full items-center justify-between",
					children: [/* @__PURE__ */ jsx("div", {
						className: "text-nowrap px-2",
						children: localeName
					}), /* @__PURE__ */ jsx(MoveVertical, { className: "w-5 self-center" })]
				})
			}), /* @__PURE__ */ jsx(DropDown.Panel, {
				identifier: DROPDOWN_IDENTIFIER,
				isOverable: true,
				isFocusable: true,
				...panelProps,
				children: /* @__PURE__ */ jsxs(Container, {
					className: "max-h-[80vh] min-w-28",
					separator: "y",
					role: "listbox",
					transparency: "sm",
					"aria-label": languageListLabel.value,
					children: [/* @__PURE__ */ jsx("div", {
						className: "p-3",
						children: /* @__PURE__ */ jsx(Input, {
							type: "search",
							"aria-label": searchInput.ariaLabel.value,
							placeholder: searchInput.placeholder.value,
							onChange: (e) => handleSearch(e.target.value),
							ref: inputRef
						})
					}), /* @__PURE__ */ jsx("ol", {
						className: "divide-y divide-dashed divide-text/20 overflow-y-auto p-1",
						children: results.map(({ locale: localeItem, currentLocaleName, ownLocaleName }) => /* @__PURE__ */ jsx("li", {
							className: "px-1.5 py-1",
							children: /* @__PURE__ */ jsx(Button, {
								onClick: () => setLocale(localeItem),
								label: `${switchTo} ${currentLocaleName}`,
								disabled: !(availableLocales ?? localeList).includes(localeItem),
								isActive: locale === localeItem,
								variant: ButtonVariant.HOVERABLE,
								color: ButtonColor.TEXT,
								isFullWidth: true,
								textAlign: ButtonTextAlign.LEFT,
								children: /* @__PURE__ */ jsxs("div", {
									className: "flex flex-row items-center justify-between gap-3 px-2 py-1",
									children: [/* @__PURE__ */ jsxs("div", {
										className: "flex flex-col text-nowrap",
										children: [/* @__PURE__ */ jsx("span", {
											dir: getHTMLTextDir(localeItem),
											lang: localeItem,
											children: ownLocaleName
										}), /* @__PURE__ */ jsx("span", {
											className: "text-neutral text-xs",
											children: currentLocaleName
										})]
									}), /* @__PURE__ */ jsx("span", {
										className: "text-neutral text-sm",
										children: localeItem.toUpperCase()
									})]
								})
							})
						}, localeItem))
					})]
				})
			})]
		})
	});
};

//#endregion
export { LocaleSwitcher };
//# sourceMappingURL=LocaleSwitcher.mjs.map