import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, } from "react";
import { CountBadge } from "../../components/ui/badge";
export function CreateReviewLanguagesStep({ selectedLanguages, setSelectedLanguages, itemLanguages, }) {
    const selectedSet = useMemo(() => new Set(selectedLanguages), [selectedLanguages]);
    const areAllLanguagesSelected = itemLanguages.length > 0 &&
        itemLanguages.every((lang) => selectedSet.has(lang.languageCode));
    const areSomeLanguagesSelected = itemLanguages.some((lang) => selectedSet.has(lang.languageCode));
    const selectAllRef = useRef(null);
    useEffect(() => {
        if (!selectAllRef.current)
            return;
        selectAllRef.current.indeterminate =
            areSomeLanguagesSelected && !areAllLanguagesSelected;
    }, [areSomeLanguagesSelected, areAllLanguagesSelected]);
    const toggleLanguage = (code, checked) => {
        if (checked) {
            setSelectedLanguages(Array.from(new Set([...selectedLanguages, code])));
        }
        else {
            setSelectedLanguages(selectedLanguages.filter((c) => c !== code));
        }
    };
    const toggleAllLanguages = () => {
        setSelectedLanguages(areAllLanguagesSelected
            ? []
            : itemLanguages.map((lang) => lang.languageCode));
    };
    return (_jsxs("div", { className: "flex flex-col gap-3 p-4 md:p-6", children: [_jsxs("div", { className: "flex shrink-0 items-start justify-between gap-2", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-neutral-grey-50 text-xs font-medium tracking-wider", children: "Select Languages" }), selectedLanguages.length > 0 && (_jsx(CountBadge, { children: selectedLanguages.length }))] }), itemLanguages.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": "select-all-languages-checkbox" }), "Select all"] }))] }), _jsx("div", { className: "grid gap-2.5 sm:grid-cols-2", children: itemLanguages.map((lang) => {
                    const checked = selectedSet.has(lang.languageCode);
                    return (_jsxs("label", { className: `group flex cursor-pointer items-center gap-2.5 rounded-[8px] border px-2 py-1.5 transition-all ${checked
                            ? "border-primary/30"
                            : "border-border-default hover:bg-neutral-grey-5"}`, "data-testid": `language-option-${lang.languageCode}`, children: [_jsx("input", { type: "checkbox", checked: checked, onChange: () => toggleLanguage(lang.languageCode, !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": `language-checkbox-${lang.languageCode}` }), lang.icon ? (_jsx("img", { src: lang.icon, alt: "", "aria-hidden": "true", className: "h-4 w-5 shrink-0 rounded-sm object-cover" })) : (_jsx("span", { className: "bg-neutral-grey-5 inline-block h-4 w-5 shrink-0 rounded-sm" })), _jsx("span", { className: "text-neutral-grey-100 min-w-0 flex-1 truncate text-[13px]", children: lang.name }), _jsx("span", { className: "text-neutral-grey-50 shrink-0 font-mono text-[10px] tracking-wider", children: lang.languageCode })] }, lang.languageCode));
                }) }), selectedLanguages.length === 0 && (_jsx("p", { className: "text-destructive text-xs font-medium", children: "Please select at least one language" }))] }));
}
//# sourceMappingURL=CreateReviewLanguagesStep.js.map