"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Check, ChevronsUpDown, Globe } from "lucide-react";
import { useEditContext } from "../../editor/client/editContext";
import { cn } from "../../lib/utils";
import { Button } from "./button";
import { Switch } from "./switch";
import { FilterInput, highlightMatch } from "../FilterInput";
import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList, } from "./command";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";
export function LanguageSelector({ selectedLanguage, onLanguageSelected, showAllLanguagesSwitch, showAllLanguages = false, disabled = false, onTranslate, translateDisabled = false, triggerVariant = "select", placeholder, }) {
    const [open, setOpen] = React.useState(false);
    const [showAllLanguagesInternal, setShowAllLanguagesInternal] = React.useState(showAllLanguages);
    const [filterText, setFilterText] = React.useState("");
    const triggerRef = React.useRef(null);
    const [portalContainer, setPortalContainer] = React.useState(null);
    const editContext = useEditContext();
    const allLanguages = editContext?.itemLanguages || [];
    const currentLanguage = allLanguages.find((x) => x.languageCode === selectedLanguage);
    let languages = showAllLanguagesInternal
        ? allLanguages
        : allLanguages.filter((x) => x.versions > 0);
    // Apply text filter
    if (filterText.trim()) {
        languages = languages.filter((x) => x.name.toLowerCase().includes(filterText.toLowerCase()));
    }
    languages.sort((a, b) => a.name.localeCompare(b.name));
    const selectLanguage = async (language) => {
        onLanguageSelected(language);
        setOpen(false);
        // Reset filter when language is selected
        setFilterText("");
        return;
    };
    const handleOpenChange = (newOpen) => {
        if (newOpen && triggerRef.current) {
            const dialogContent = triggerRef.current.closest('[data-slot="dialog-content"]');
            setPortalContainer(dialogContent);
        }
        setOpen(newOpen);
        if (!newOpen) {
            // Reset filter when popover closes
            setFilterText("");
        }
    };
    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, enableIframeClickDetection: false, children: [_jsx(PopoverTrigger, { asChild: true, children: triggerVariant === "ghost" ? (_jsx("button", { ref: triggerRef, type: "button", role: "combobox", "aria-expanded": open, "data-testid": "language-selector", disabled: disabled, title: currentLanguage?.name ?? undefined, className: cn("badge-pad text-neutral-grey-50 hover:bg-neutral-grey-5 inline-flex max-w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-full text-xs transition-colors", disabled && "cursor-not-allowed opacity-50"), children: currentLanguage ? (_jsxs(_Fragment, { children: [_jsx("img", { src: currentLanguage.icon, className: "h-4 shrink-0", alt: currentLanguage.name }), _jsx("span", { "data-testid": "language-selector-label", className: "truncate", children: currentLanguage.name })] })) : (_jsxs(_Fragment, { children: [_jsx(Globe, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }), _jsx("span", { className: "truncate", children: placeholder ?? "Select language" })] })) })) : (_jsxs(Button, { ref: triggerRef, variant: "select", role: "combobox", "aria-expanded": open, className: cn("max-w-full min-w-0", disabled && "cursor-not-allowed opacity-50"), "data-testid": "language-selector", disabled: disabled, title: currentLanguage?.name ?? undefined, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [currentLanguage && (_jsxs(_Fragment, { children: [_jsx("img", { src: currentLanguage.icon, className: "h-5 shrink-0", alt: currentLanguage.name }), _jsx("span", { "data-testid": "language-selector-label", className: "min-w-[5ch] truncate", children: currentLanguage.name })] })), !currentLanguage && (_jsx("div", { children: placeholder ?? "Select language" }))] }), _jsx(ChevronsUpDown, { className: "hidden h-4 w-4 shrink-0 opacity-50 md:block", strokeWidth: 1 })] })) }), _jsx(PopoverContent, { className: "w-64 p-0", align: "start", container: portalContainer, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: _jsxs(Command, { children: [showAllLanguagesSwitch && (_jsxs("div", { className: "flex items-center justify-center gap-2 p-2 text-xs font-light", children: [_jsx("span", { className: "cursor-pointer", onClick: () => setShowAllLanguagesInternal(false), children: "Item languages" }), _jsx(Switch, { checked: showAllLanguagesInternal, className: "cursor-pointer", onCheckedChange: (checked) => setShowAllLanguagesInternal(checked) }), _jsx("span", { className: "cursor-pointer", onClick: () => setShowAllLanguagesInternal(true), children: "All languages" })] })), _jsx("div", { className: "p-2", children: _jsx(FilterInput, { value: filterText, onChange: setFilterText, placeholder: "Filter languages...", className: "w-full", onClear: () => setFilterText("") }) }), _jsxs(CommandList, { className: "max-h-[50vh]", children: [_jsx(CommandEmpty, { children: filterText.trim()
                                        ? `No languages found matching "${filterText}"`
                                        : "This item has no languages" }), _jsx(CommandGroup, { children: languages.map((language) => (_jsxs(CommandItem, { value: language.languageCode, "data-testid": `language-option-${language.languageCode}`, onSelect: () => selectLanguage(language), className: cn("flex items-center gap-2 px-2 py-2 text-xs font-light", 
                                        // Remove background when selected (auto-focused) but not hovered
                                        "data-[selected=true]:bg-transparent", 
                                        // Force hover styles to override selected state
                                        "[&:hover]:!bg-accent [&:hover]:!text-accent-foreground"), children: [_jsx("img", { src: language.icon, className: "h-5 w-5 shrink-0", alt: language.name }), _jsxs("span", { className: "flex-1", children: [highlightMatch(language.name, filterText), " (", language.versions, ")"] }), _jsx(Check, { className: cn("h-4 w-4", selectedLanguage === language.languageCode
                                                    ? "opacity-100"
                                                    : "opacity-0"), strokeWidth: 1 })] }, language.languageCode))) })] }), onTranslate && (_jsx("div", { className: "border-t p-2", children: _jsxs(Button, { size: "sm", variant: "ghost", className: "w-full justify-start gap-2", disabled: translateDisabled, "data-testid": "language-selector-translate-button", onClick: () => {
                                    onTranslate();
                                    setOpen(false);
                                    setFilterText("");
                                }, children: [_jsx(Globe, { className: "h-4 w-4", strokeWidth: 1 }), _jsx("span", { children: "Translate\u2026" })] }) }))] }) })] }));
}
//# sourceMappingURL=LanguageSelector.js.map