EpicNext-Cms/src/components/language-switcher.tsx

"use client";

import { Search } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useLocale } from "next-intl";
import { useEffect, useMemo, useRef, useState, useTransition } from "react";
import { setLocaleCookie } from "@/actions/set-locale";

const LOCALES: { code: string; label: string; lang: string }[] = [
	{ code: "nl", label: "Nederlands", lang: "nl" },
	{ code: "en", label: "English", lang: "en" },
	{ code: "de", label: "Deutsch", lang: "de" },
	{ code: "fr", label: "Français", lang: "fr" },
	{ code: "es", label: "Español", lang: "es" },
	{ code: "it", label: "Italiano", lang: "it" },
	{ code: "pt", label: "Português", lang: "pt" },
	{ code: "pl", label: "Polski", lang: "pl" },
	{ code: "sv", label: "Svenska", lang: "sv" },
	{ code: "tr", label: "Türkçe", lang: "tr" },
	{ code: "ro", label: "Română", lang: "ro" },
	{ code: "hu", label: "Magyar", lang: "hu" },
	{ code: "cs", label: "Čeština", lang: "cs" },
	{ code: "sk", label: "Slovenčina", lang: "sk" },
	{ code: "da", label: "Dansk", lang: "da" },
	{ code: "no", label: "Norsk", lang: "no" },
	{ code: "el", label: "Ελληνικά", lang: "el" },
	{ code: "bg", label: "Български", lang: "bg" },
	{ code: "hr", label: "Hrvatski", lang: "hr" },
	{ code: "sr", label: "Српски", lang: "sr" },
	{ code: "uk", label: "Українська", lang: "uk" },
	{ code: "ru", label: "Русский", lang: "ru" },
];

export function LanguageSwitcher({
	variant = "nav",
}: {
	variant?: "nav" | "admin";
}) {
	const locale = useLocale();
	const router = useRouter();
	const [pending, startTransition] = useTransition();
	const [open, setOpen] = useState(false);
	const [search, setSearch] = useState("");
	const ref = useRef<HTMLDivElement>(null);
	const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
	const isAdmin = variant === "admin";

	const filtered = useMemo(() => {
		if (!search) return LOCALES;
		const q = search.toLowerCase();
		return LOCALES.filter(
			(l) =>
				l.label.toLowerCase().includes(q) ||
				l.code.toLowerCase().includes(q) ||
				l.lang.toLowerCase().includes(q),
		);
	}, [search]);

	useEffect(() => {
		function handleClick(e: MouseEvent) {
			if (ref.current && !ref.current.contains(e.target as Node))
				setOpen(false);
		}
		document.addEventListener("mousedown", handleClick);
		return () => document.removeEventListener("mousedown", handleClick);
	}, []);

	useEffect(() => {
		if (!open) setSearch("");
	}, [open]);

	function switchLocale(code: string) {
		if (code === locale) return;
		startTransition(async () => {
			await setLocaleCookie(code);
			router.refresh();
		});
		setOpen(false);
	}

	return (
		<div className="relative" ref={ref}>
			<button
				type="button"
				onClick={() => setOpen(!open)}
				disabled={pending}
				aria-label="Change language"
				title="Language"
				aria-expanded={open}
				className={
					isAdmin
						? "flex items-center gap-1.5 h-9 rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] px-2 text-xs font-bold uppercase tracking-wide text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/15 hover:text-[var(--admin-accent)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] disabled:opacity-60"
						: "nav-item flex items-center gap-1.5 bg-transparent text-[13px] border-none cursor-pointer px-1"
				}
			>
				<Image
					src={`/assets/images/icons/flags/${current.code}.png`}
					alt={current.lang}
					width={16}
					height={16}
					className="inline-block h-4 w-auto"
				/>
				<span>{current.code.toUpperCase()}</span>
				<svg
					className="w-3 h-3 opacity-70"
					fill="none"
					stroke="currentColor"
					viewBox="0 0 24 24"
					aria-hidden
				>
					<path
						strokeLinecap="round"
						strokeLinejoin="round"
						strokeWidth={2}
						d="M19 9l-7 7-7-7"
					/>
				</svg>
			</button>

			{open && (
				<div
					className={
						isAdmin
							? "absolute right-0 top-full mt-1.5 z-50 w-[220px] rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface)] text-[var(--admin-text)] shadow-xl py-2"
							: "dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
					}
				>
					<div className="px-3 pb-1">
						<div
							className={
								isAdmin
									? "flex items-center gap-1.5 rounded-md border border-[var(--admin-border)] bg-[var(--admin-canvas)] px-2 py-1.5 text-sm"
									: "flex items-center gap-1.5 rounded-md border bg-background px-2 py-1.5 text-sm"
							}
						>
							<Search className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
							<input
								type="text"
								placeholder="Search..."
								value={search}
								onChange={(e) => setSearch(e.target.value)}
								className="flex-1 bg-transparent outline-none text-sm border-0 p-0 m-0 text-inherit"
							/>
						</div>
					</div>
					<div className="max-h-[260px] overflow-y-auto">
						{filtered.length === 0 && (
							<p className="px-3 py-4 text-center text-xs text-muted-foreground">
								No languages found
							</p>
						)}
						{filtered.map((l) => (
							<button
								key={l.code}
								type="button"
								onClick={() => switchLocale(l.code)}
								className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium transition-colors rounded-lg mx-1 border-0 cursor-pointer ${
									l.code === locale
										? isAdmin
											? "bg-[var(--admin-accent)]/15 text-[var(--admin-text)]"
											: "opacity-100"
										: isAdmin
											? "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
											: "opacity-70 hover:opacity-100"
								}`}
								style={
									isAdmin
										? { width: "calc(100% - 8px)" }
										: {
												color: "var(--color-text-readable, var(--color-text))",
												background:
													l.code === locale
														? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
														: "none",
												width: "calc(100% - 8px)",
											}
								}
							>
								<Image
									src={`/assets/images/icons/flags/${l.code}.png`}
									alt={l.lang}
									width={16}
									height={16}
									className="inline-block h-4 w-auto"
								/>
								{l.label}
							</button>
						))}
					</div>
				</div>
			)}
		</div>
	);
}