"use client";
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useMemo, useRef } from "react";
import { cn } from "../../lib/utils";
import { CountBadge } from "./badge";
export function LanguageSelectionGrid({ languages, selectedLanguageCodes, onSelectedLanguageCodesChange, title = "Target Languages", testId = "language-selection-grid", selectAllLabel = "Select all", selectAllTestId = "select-all-languages-checkbox", checkboxTestIdPrefix = "language-checkbox", getLanguageTestId, emptyState, isLoading = false, showCount = true, className, gridClassName, bodyClassName, headerless = false, }) {
    const selectedSet = useMemo(() => new Set(selectedLanguageCodes), [selectedLanguageCodes]);
    const selectableLanguages = languages.filter((language) => !language.disabled);
    const areAllLanguagesSelected = selectableLanguages.length > 0 &&
        selectableLanguages.every((language) => selectedSet.has(language.code));
    const areSomeLanguagesSelected = selectableLanguages.some((language) => selectedSet.has(language.code));
    const selectAllRef = useRef(null);
    useEffect(() => {
        if (!selectAllRef.current)
            return;
        selectAllRef.current.indeterminate =
            areSomeLanguagesSelected && !areAllLanguagesSelected;
    }, [areAllLanguagesSelected, areSomeLanguagesSelected]);
    const selectedCount = languages.filter((language) => selectedSet.has(language.code)).length;
    const setLanguageSelection = (languageCode, checked) => {
        if (checked) {
            onSelectedLanguageCodesChange(Array.from(new Set([...selectedLanguageCodes, languageCode])));
            return;
        }
        onSelectedLanguageCodesChange(selectedLanguageCodes.filter((code) => code !== languageCode));
    };
    const toggleAllLanguages = () => {
        onSelectedLanguageCodesChange(areAllLanguagesSelected
            ? []
            : selectableLanguages.map((language) => language.code));
    };
    return (_jsxs("div", { className: cn("border-border-default mx-auto flex min-h-0 w-full max-w-3xl flex-1 flex-col overflow-hidden rounded-xl border bg-white", className), "data-testid": testId, children: [" ", !headerless && (_jsxs("div", { className: "border-border-default bg-gray-4/50 flex h-[37px] shrink-0 items-center justify-between gap-2 border-b px-3", children: [" ", _jsxs("div", { className: "flex items-baseline gap-2", children: [" ", _jsxs("span", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: [" ", title, " "] }), " ", showCount && selectedCount > 0 && (_jsx(CountBadge, { children: selectedCount })), " "] }), " ", languages.length > 1 && (_jsxs("label", { className: "text-neutral-grey-50 hover:text-neutral-grey-100 flex cursor-pointer items-center gap-1.5 text-[11px] font-medium transition-colors", children: [" ", _jsx("input", { ref: selectAllRef, type: "checkbox", checked: areAllLanguagesSelected, onChange: toggleAllLanguages, className: "border-border-default h-3 w-3 rounded text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": selectAllTestId }), " ", selectAllLabel, " "] })), " "] })), " ", _jsxs("div", { className: cn("min-h-0 flex-1 overflow-y-auto p-2", bodyClassName), children: [" ", isLoading ? (_jsxs("div", { className: "grid gap-2 p-1 sm:grid-cols-2", children: [" ", [...Array(6)].map((_, index) => (_jsxs("div", { className: "border-border-default flex animate-pulse items-center gap-2 rounded-lg border px-3 py-2", children: [" ", _jsx("div", { className: "bg-neutral-grey-10 h-3.5 w-3.5 rounded" }), " ", _jsx("div", { className: "bg-neutral-grey-10 h-4 w-4 rounded-sm" }), " ", _jsx("div", { className: "bg-neutral-grey-10 h-3.5 w-24 rounded" }), " ", _jsx("div", { className: "bg-gray-4 ml-auto h-3 w-10 rounded" }), " "] }, index))), " "] })) : languages.length === 0 ? (_jsxs("div", { className: "text-muted-foreground p-4 text-center text-sm", children: [" ", emptyState ?? "No languages available.", " "] })) : (_jsxs("div", { className: cn("grid gap-1.5 sm:grid-cols-2", gridClassName), children: [" ", languages.map((language) => {
                                const checked = selectedSet.has(language.code);
                                return (_jsxs("label", { className: cn("group flex cursor-pointer items-center gap-2.5 rounded-lg border px-2 py-1.5 transition-all", checked
                                        ? "border-primary/30 bg-primary/5 ring-primary/10 ring-1"
                                        : "border-border-default hover:border-border-default hover:bg-gray-4", language.disabled && "cursor-not-allowed opacity-50"), "data-testid": getLanguageTestId?.(language), children: [" ", _jsx("input", { type: "checkbox", checked: checked, disabled: language.disabled, onChange: () => setLanguageSelection(language.code, !checked), className: "border-border-default h-3.5 w-3.5 shrink-0 rounded text-[var(--color-highlight-100)] accent-[var(--color-highlight-100)] focus:ring-[var(--color-highlight-100)]", "data-testid": `${checkboxTestIdPrefix}-${language.code}` }), " ", language.icon ? (_jsx("img", { src: language.icon, alt: "", "aria-hidden": "true", className: "h-4 w-5 shrink-0 rounded-sm object-cover" })) : (_jsx("span", { className: "bg-gray-4 inline-block h-4 w-5 shrink-0 rounded-sm" })), " ", _jsxs("span", { className: cn("min-w-0 flex-1 truncate text-[13px]", checked
                                                ? "text-neutral-grey-100 font-medium"
                                                : "text-neutral-grey-100"), children: [" ", language.name, " "] }), " ", language.meta ?? (_jsxs("span", { className: "text-neutral-grey-50 shrink-0 font-mono text-[10px] tracking-wider", children: [" ", language.code, " "] })), " "] }, language.code));
                            }), " "] })), " "] }), " "] }));
}
//# sourceMappingURL=LanguageSelectionGrid.js.map