import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Button } from "../../../components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, } from "../../../components/ui/dialog";
import { useEffect, useState } from "react";
import DialogButtons from "../../ui/DialogButtons";
import { getLanguagesAndVersions } from "../../services/contentService";
import { Checkbox } from "../../../components/ui/checkbox";
import { Spinner } from "../../ui/Spinner";
export function LocalizeItemDialog(props) {
    const [languageSelection, setLanguageSelection] = useState({});
    const [languageData, setLanguageData] = useState();
    const [isExecuting, setIsExecuting] = useState(false);
    const [currentTask, setCurrentTask] = useState();
    const [completedTasks, setCompletedTasks] = useState([]);
    const [finished, setFinished] = useState(false);
    useEffect(() => {
        const itemDescriptors = props.items.map((x) => x.descriptor);
        const loadLanguages = async () => {
            const itemLanguages = await Promise.all(itemDescriptors.map(async (item) => {
                const result = await getLanguagesAndVersions(item);
                return result.data?.languages || [];
            }));
            const languageMap = new Map();
            itemLanguages.forEach((languages, index) => {
                languages.forEach((language) => {
                    const languageData = languageMap.get(language.name) || {
                        name: language.name,
                        items: [],
                    };
                    if (language.versions > 0 && itemDescriptors[index])
                        languageData.items.push(itemDescriptors[index]);
                    languageMap.set(language.languageCode, languageData);
                });
            });
            setLanguageData(languageMap);
        };
        loadLanguages();
    }, [props]);
    async function startLocalization() {
        setIsExecuting(true);
        const completedTasks = [];
        for (const item of props.items) {
            for (const language of Object.keys(languageSelection)) {
                if (!languageSelection[language])
                    continue;
                if (languageData
                    ?.get(language)
                    ?.items.find((x) => x.id === item.descriptor.id))
                    continue;
                setCurrentTask(`${item.name} - ${language}`);
                await props.editContext.operations.createVersion({
                    id: item.descriptor.id,
                    language: language,
                    version: 0,
                });
                completedTasks.push(`${item.name} - ${language}`);
            }
        }
        setFinished(true);
        setCompletedTasks(completedTasks);
    }
    const allLanguages = Array.from(languageData?.keys() || []).map((x) => ({
        code: x,
        name: languageData?.get(x)?.name || "",
    }));
    allLanguages.sort((a, b) => a.name.localeCompare(b.name));
    const dialogContent = getContent();
    function getContent() {
        if (finished)
            return (_jsxs("div", { className: "justify flex h-full flex-col gap-1", children: [completedTasks.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-3 pt-3 text-lg font-bold", children: "Finished. Versions created:" }), _jsx("div", { className: "relative flex-1", children: _jsx("div", { className: "absolute inset-3 flex flex-col gap-3 overflow-y-auto", children: completedTasks.map((x, index) => (_jsx("div", { children: x }, index))) }) })] })), completedTasks.length === 0 && (_jsx("div", { className: "flex h-full items-center justify-center", children: "All items are already localized." })), _jsx(DialogButtons, { children: _jsx(Button, { onClick: () => props.onClose?.(null), size: "sm", children: "Close" }) })] }));
        if (isExecuting)
            return (_jsxs("div", { className: "flex h-full items-center justify-center gap-3", children: [_jsx(Spinner, {}), " Creating version ", currentTask] }));
        return (_jsxs("div", { className: "justify flex h-full flex-col gap-1 text-sm", children: [_jsxs("div", { className: "flex h-full flex-col gap-2 p-3", children: [_jsxs("div", { className: "my-2", children: ["Select languages to localize", " ", props.items.map((x) => x.name).join(", "), ":"] }), _jsxs("div", { className: "my-1 flex items-center gap-2", children: [_jsx(Checkbox, { checked: allLanguages.every((language) => languageSelection[language.code]), onCheckedChange: (checked) => {
                                        setLanguageSelection(Object.fromEntries(Array.from(languageData?.keys() || []).map((language) => [
                                            language,
                                            Boolean(checked),
                                        ])));
                                    } }), " ", "All"] }), _jsx("div", { className: "relative flex-1", children: _jsx("div", { className: "absolute top-0 left-0 h-full w-full overflow-y-auto", children: allLanguages.map((language) => (_jsxs("div", { className: "my-2 flex items-center gap-2", children: [_jsx(Checkbox, { checked: languageSelection[language.code] || false, onCheckedChange: (checked) => {
                                                setLanguageSelection((prev) => ({
                                                    ...prev,
                                                    [language.code]: Boolean(checked),
                                                }));
                                            } }), _jsx("div", { children: language.name })] }, language.code))) }) })] }), _jsxs(DialogButtons, { children: [_jsx(Button, { onClick: () => props.onClose?.(null), size: "sm", children: "Cancel" }), _jsx(Button, { onClick: startLocalization, size: "sm", children: "Start" })] })] }));
    }
    return (_jsx(Dialog, { open: true, onOpenChange: (open) => {
            if (!open) {
                props.onClose?.(null);
            }
        }, children: _jsxs(DialogContent, { className: "max-w-none", style: { width: "75vw", height: "75vh" }, children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Localize" }) }), _jsx("div", { className: "flex-1 overflow-auto", children: dialogContent })] }) }));
}
//# sourceMappingURL=LocalizeItemDialog.js.map