import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "../cmp/alert-dialog";
import { Button } from "../cmp/button";
import { cn } from "../lib/utils";
import { useTheme } from "./Provider";
export function ThemeSelector({ value, onValueChange, className, }) {
    const { themes, parentThemeId, applyThemePreset, isThemeCustomized } = useTheme();
    const selected = value === undefined ? parentThemeId : value;
    const [pendingThemeId, setPendingThemeId] = useState(null);
    const apply = (id) => {
        applyThemePreset(id);
        onValueChange?.(id);
    };
    const choose = (id) => {
        if (id === selected)
            return;
        if (isThemeCustomized && parentThemeId && parentThemeId !== id) {
            setPendingThemeId(id);
            return;
        }
        apply(id);
    };
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("grid w-full grid-cols-[repeat(auto-fit,minmax(5rem,1fr))] gap-3 sm:flex sm:flex-wrap", className), children: themes.map((theme) => (_jsxs("div", { className: "flex flex-col items-center gap-1.5", children: [_jsx(Button, { variant: selected === theme.id ? "default" : "outline", onClick: () => choose(theme.id), className: "h-20! w-20 overflow-hidden rounded-md p-1.5!", children: _jsx("img", { src: theme.logo, className: "rounded-md aspect-square" }) }), _jsx("p", { className: "text-sm font-medium", children: theme.title })] }, theme.id))) }), _jsx(AlertDialog, { open: pendingThemeId !== null, onOpenChange: (open) => {
                    if (!open)
                        setPendingThemeId(null);
                }, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Replace your custom theme?" }), _jsx(AlertDialogDescription, { children: "Choosing another base theme replaces your current visual settings and custom CSS. This cannot be undone." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Keep editing" }), _jsx(AlertDialogAction, { onClick: () => {
                                        if (pendingThemeId)
                                            apply(pendingThemeId);
                                        setPendingThemeId(null);
                                    }, children: "Replace theme" })] })] }) })] }));
}
