"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEditContext } from "../client/editContext";
import { Input } from "../../components/ui/input";
import { PictureEditor } from "../PictureEditor";
import { useEffect, useState } from "react";
import { SimpleIconButton } from "../ui/SimpleIconButton";
import { Trash } from "lucide-react";
export function PictureFieldEditor({ field, readOnly, }) {
    const editContext = useEditContext();
    const [altText, setAltText] = useState("");
    if (!field || !editContext)
        return;
    var item = field.descriptor.item;
    useEffect(() => {
        setAltText(field.value?.alt || "");
    }, [field.value?.alt]);
    if (field.value?.error) {
        return _jsx("div", { children: field.value?.error });
    }
    return (_jsxs("div", { children: [_jsx("div", { className: "focus-shadow bg-gray-5 flex h-full flex-wrap gap-2 rounded-md", children: field?.value?.variants?.map((variant) => (_jsxs("div", { children: [_jsxs("div", { className: "relative flex h-48 w-48 cursor-pointer items-center justify-center border border-gray-300", children: [variant.src && _jsx("img", { src: variant.thumbSrc }), !readOnly && (_jsx(PictureEditor, { field: field, variantName: variant.name }))] }), _jsxs("div", { className: "p-1", children: [_jsx("div", { className: "text-xs", children: variant.name }), _jsx("div", { className: "text-xs", children: variant.aspectRatioLockText })] }), variant.videoUrl && (_jsxs("div", { className: "text-xs", children: ["Video: ", variant.videoUrl, _jsx(SimpleIconButton, { onClick: () => {
                                        const raw = field.rawValue
                                            ? JSON.parse(field?.rawValue)
                                            : { Variants: [] };
                                        if (!raw.Variants)
                                            return;
                                        let rawVariant = raw.Variants.find((v) => v.Name === variant.name);
                                        if (rawVariant) {
                                            rawVariant.VideoId = undefined;
                                        }
                                        else {
                                            rawVariant = {
                                                Name: variant.name,
                                                VideoId: undefined,
                                            };
                                            raw.Variants.push(rawVariant);
                                        }
                                        editContext.operations.editField({
                                            field: field.descriptor,
                                            rawValue: JSON.stringify(raw),
                                            refresh: "immediate",
                                        });
                                    }, icon: _jsx(Trash, { className: "h-4 w-4" }), label: "Remove" })] }))] }, variant.name))) }), _jsxs("div", { className: "mt-2", children: [_jsx("div", { className: "mb-1", children: "Alt Text" }), _jsx(Input, { value: altText, disabled: readOnly, className: "focus-shadow bg-gray-5 w-full p-1.5 text-xs", onChange: (e) => {
                            setAltText(e.target.value);
                            const raw = field?.rawValue
                                ? JSON.parse(field?.rawValue)
                                : { Variants: [] };
                            raw.AltText = e.target.value;
                            if (field.value)
                                field.value.alt = e.target.value;
                            editContext.operations.editField({
                                field: field.descriptor,
                                rawValue: JSON.stringify(raw),
                                refresh: "waitForQuietPeriod",
                            });
                        } }, item.id + field.id + item.language + item.version)] })] }));
}
//# sourceMappingURL=PictureFieldEditor.js.map