'use client';

import { Container } from "../Container/index.mjs";
import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
import { Input } from "../Input/Input.mjs";
import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
import { DropDown } from "../DropDown/index.mjs";
import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../SwitchSelector/index.mjs";
import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
import { Check, Globe, MoveVertical } from "lucide-react";
import { useMemo, useRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { getHTMLTextDir, getLocaleName } from "@intlayer/core";
import { useIntlayer, useLocale } from "react-intlayer";
import { Locales } from "@intlayer/types";
import Fuse from "fuse.js";

//#region src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
const DROPDOWN_IDENTIFIER = "locale-switcher-content";
const LocaleSwitcherContent = ({ panelProps, isMultilingual = true }) => {
	const { switchTo, searchInput, localeSwitcherLabel, languageListLabel, seeAllLocalesSwitch } = useIntlayer("locale-switcher-content");
	const inputRef = useRef(null);
	const { locale } = useLocale();
	const { availableLocales, selectedLocales, setSelectedLocales } = useLocaleSwitcherContent();
	const multilingualAvailableLocales = useMemo(() => availableLocales.map((localeEl) => {
		return {
			locale: localeEl,
			englishName: getLocaleName(localeEl, Locales.ENGLISH),
			currentLocaleName: getLocaleName(localeEl, locale),
			ownLocaleName: getLocaleName(localeEl)
		};
	}), [availableLocales, locale]);
	const [searchQuery, setSearchQuery] = useState("");
	const [seeAllLocales, setSeeAllLocales] = usePersistedStore("locale-content-selector-see-all-locales", false);
	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 results = useMemo(() => {
		if (!searchQuery) return multilingualAvailableLocales;
		return fuse.search(searchQuery).map((result) => result.item);
	}, [
		searchQuery,
		multilingualAvailableLocales,
		fuse
	]);
	const handleClickLocale = (localeItem) => {
		if (isMultilingual) if (selectedLocales.includes(localeItem)) {
			if (selectedLocales.length > 1) setSelectedLocales((prev) => prev.filter((el) => el !== localeItem));
		} else setSelectedLocales((prev) => [...prev, localeItem]);
		else setSelectedLocales([localeItem]);
	};
	const handleSeeAllLocales = (value) => {
		setSeeAllLocales(value);
		if (value) setSelectedLocales(availableLocales);
		else setSelectedLocales([locale]);
	};
	return /* @__PURE__ */ jsx("div", {
		className: "rounded-xl border border-text text-text transition-colors",
		children: /* @__PURE__ */ jsxs(DropDown, {
			identifier: DROPDOWN_IDENTIFIER,
			children: [/* @__PURE__ */ jsx(DropDown.Trigger, {
				identifier: DROPDOWN_IDENTIFIER,
				label: localeSwitcherLabel.value,
				className: "p-0!",
				roundedSize: "3xl",
				children: /* @__PURE__ */ jsxs("div", {
					className: "flex w-full items-center justify-between",
					children: [/* @__PURE__ */ jsx("div", {
						className: "px-2 py-1",
						children: /* @__PURE__ */ jsx(Globe, { size: 16 })
					}), /* @__PURE__ */ jsx(MoveVertical, {
						className: "self-center",
						size: 16
					})]
				})
			}), /* @__PURE__ */ jsx(DropDown.Panel, {
				identifier: DROPDOWN_IDENTIFIER,
				isOverable: true,
				isFocusable: true,
				className: "right-0 left-auto",
				...panelProps,
				children: /* @__PURE__ */ jsxs(Container, {
					className: "max-h-[60vh] min-w-28",
					separator: "y",
					role: "listbox",
					transparency: "xs",
					border: true,
					roundedSize: "2xl",
					borderColor: "text",
					"aria-label": languageListLabel.value,
					children: [isMultilingual && /* @__PURE__ */ jsx("div", {
						className: "m-auto p-2",
						children: /* @__PURE__ */ jsx(SwitchSelector, {
							defaultValue: seeAllLocales,
							onChange: handleSeeAllLocales,
							color: SwitchSelectorColor.TEXT,
							size: SwitchSelectorSize.SM,
							className: "!w-60",
							choices: [{
								content: seeAllLocalesSwitch.true.value,
								value: true
							}, {
								content: seeAllLocalesSwitch.false.value,
								value: false
							}]
						})
					}), !(isMultilingual && seeAllLocales) && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
						className: "p-3",
						children: /* @__PURE__ */ jsx(Input, {
							type: "search",
							"aria-label": searchInput.ariaLabel.value,
							placeholder: searchInput.placeholder.value,
							onChange: (e) => setSearchQuery(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: () => handleClickLocale(localeItem),
								label: `${switchTo} ${currentLocaleName}`,
								disabled: !(availableLocales ?? availableLocales).includes(localeItem),
								isActive: selectedLocales.includes(localeItem),
								variant: ButtonVariant.HOVERABLE,
								color: ButtonColor.TEXT,
								isFullWidth: true,
								textAlign: ButtonTextAlign.LEFT,
								size: ButtonSize.SM,
								children: /* @__PURE__ */ jsxs("div", {
									className: "flex flex-row items-center justify-between gap-3 px-2 py-1",
									children: [isMultilingual && /* @__PURE__ */ jsx("div", {
										className: "w-4",
										children: selectedLocales.includes(localeItem) && /* @__PURE__ */ jsx(Check, { className: "size-full" })
									}), /* @__PURE__ */ jsxs("div", {
										className: "flex flex-1 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 { LocaleSwitcherContent };
//# sourceMappingURL=LocaleSwitcherContent.mjs.map