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

"use client";

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

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() {
  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 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;
    document.cookie = `NEXT_LOCALE=${code};path=/;max-age=31536000;samesite=strict;secure`;
    startTransition(() => router.refresh());
    setOpen(false);
  }

  return (
    <div className="relative" ref={ref}>
      <button
        type="button"
        onClick={() => setOpen(!open)}
        disabled={pending}
        className="nav-item flex items-center gap-1.5 bg-transparent text-[13px]"
        style={{ border: "none", cursor: "pointer", padding: "0 0.25rem" }}
      >
        <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" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
        </svg>
      </button>

      {open && (
        <div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
          <div className="px-3 pb-1">
            <div className="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" />
              <input
                type="text"
                placeholder="Search..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="flex-1 bg-transparent outline-none text-sm"
                style={{ border: "none", padding: 0, margin: 0 }}
                autoFocus
              />
            </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">Geen talen gevonden</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-all duration-100 rounded-lg mx-1 ${
                  l.code === locale ? "opacity-100" : "opacity-70 hover:opacity-100"
                }`}
                style={{
                  color: "var(--color-text-readable, var(--color-text))",
                  background: l.code === locale ? "color-mix(in srgb, var(--color-primary) 10%, transparent)" : "none",
                  border: "none",
                  cursor: "pointer",
                  width: "calc(100% - 8px)",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.backgroundColor =
                    "color-mix(in srgb, var(--color-primary) 10%, transparent)";
                  e.currentTarget.style.color = "var(--color-primary)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.backgroundColor =
                    l.code === locale ? "color-mix(in srgb, var(--color-primary) 10%, transparent)" : "transparent";
                  e.currentTarget.style.color = "var(--color-text)";
                }}
              >
                <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>
  );
}