import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { ImagePlus } from "lucide-react";
import { Button } from "../../components/ui/button";
import { Dialog, DialogContent } from "../../components/ui/dialog";
import { StyledDialogTitle } from "../../components/ui/styled-dialog-title";
import DialogButtons from "./DialogButtons";
import { Spinner } from "./Spinner";
export function ComponentThumbnailDialog(props) {
    const [capture, setCapture] = useState(props.imageDataUrl
        ? {
            imageDataUrl: props.imageDataUrl,
            imageWidth: props.imageWidth,
            imageHeight: props.imageHeight,
        }
        : null);
    const [loading, setLoading] = useState(!props.imageDataUrl);
    const [error, setError] = useState(null);
    useEffect(() => {
        if (props.imageDataUrl) {
            setCapture({
                imageDataUrl: props.imageDataUrl,
                imageWidth: props.imageWidth,
                imageHeight: props.imageHeight,
            });
            setLoading(false);
            setError(null);
            return;
        }
        if (!props.captureThumbnail) {
            setLoading(false);
            setError("Could not start thumbnail capture.");
            return;
        }
        let cancelled = false;
        setLoading(true);
        setError(null);
        setCapture(null);
        props
            .captureThumbnail()
            .then((result) => {
            if (cancelled)
                return;
            setCapture(result);
            setLoading(false);
        })
            .catch((captureError) => {
            if (cancelled)
                return;
            setLoading(false);
            setError(captureError instanceof Error
                ? captureError.message
                : "Could not capture the selected component thumbnail.");
        });
        return () => {
            cancelled = true;
        };
    }, [
        props.captureThumbnail,
        props.imageDataUrl,
        props.imageHeight,
        props.imageWidth,
    ]);
    const dimensions = capture?.imageWidth && capture.imageHeight
        ? `${capture.imageWidth} x ${capture.imageHeight}`
        : undefined;
    return (_jsx(Dialog, { open: true, onOpenChange: (open) => {
            if (!open)
                props.onClose?.(null);
        }, children: _jsxs(DialogContent, { className: "overflow-hidden border-none p-0 shadow-2xl", style: { width: "min(720px, 94vw)" }, children: [_jsx(StyledDialogTitle, { icon: _jsx(ImagePlus, { strokeWidth: 1.5 }), title: "Create thumbnail", subtitle: props.componentName }), _jsxs("div", { className: "flex flex-col gap-4 bg-white px-6 py-5", children: [_jsx("div", { className: "border-border-default bg-neutral-grey-5 flex max-h-[55vh] min-h-[180px] items-center justify-center overflow-hidden rounded border", children: loading ? (_jsxs("div", { className: "text-muted-foreground flex flex-col items-center gap-3 text-sm", children: [_jsx(Spinner, { size: "xl" }), _jsx("span", { children: "Capturing thumbnail..." })] })) : error ? (_jsx("div", { className: "text-destructive max-w-md px-6 text-center text-sm font-medium", children: error })) : capture ? (_jsx("img", { src: capture.imageDataUrl, alt: props.componentName, draggable: false, className: "max-h-[55vh] w-full object-contain" })) : null }), dimensions && (_jsx("div", { className: "text-muted-foreground text-xs", children: dimensions }))] }), _jsxs(DialogButtons, { children: [_jsx(Button, { variant: "ghost", onClick: () => props.onClose?.(null), children: "Cancel" }), _jsx(Button, { variant: "default", disabled: !capture || loading, onClick: () => {
                                if (capture)
                                    props.onClose?.(capture);
                            }, children: "Save thumbnail" })] })] }) }));
}
//# sourceMappingURL=ComponentThumbnailDialog.js.map