"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 { DeleteIcon } from "../../components/ui/delete-icon";
import { tryParsePictureRawValue } from "../pictureRawValue";
export function PictureFieldEditor({ field, readOnly, }) {
    const editContext = useEditContext();
    const [altText, setAltText] = useState("");
    if (!field || !editContext)
        return;
    var item = field.descriptor.item;
    const pictureRawValue = tryParsePictureRawValue(field.rawValue);
    const canEditAltText = !!pictureRawValue?.Variants?.some((variant) => variant.MediaId || variant.VideoId);
    useEffect(() => {
        setAltText(field.value?.alt || "");
    }, [field.value?.alt]);
    const variants = field.value?.variants && field.value.variants.length > 0
        ? field.value.variants
        : [
            {
                name: "Default",
            },
        ];
    return (_jsxs("div", { children: [field.value?.error && (_jsx("div", { className: "text-feedback-red mb-2 text-xs", "data-testid": "picture-field-error", children: field.value.error })), _jsx("div", { className: "focus-shadow bg-neutral-grey-5 flex h-full flex-wrap gap-2 rounded-[4px]", children: variants.map((variant) => (_jsxs("div", { children: [_jsxs("div", { className: "border-border-default relative flex h-48 w-48 cursor-pointer items-center justify-center rounded-[4px] border", children: ["src" in variant && 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 }), "aspectRatioLockText" in variant && (_jsx("div", { className: "text-xs", children: variant.aspectRatioLockText }))] }), "videoUrl" in variant && variant.videoUrl && (_jsxs("div", { className: "text-xs", children: ["Video: ", variant.videoUrl, _jsx(SimpleIconButton, { onClick: () => {
                                        const raw = tryParsePictureRawValue(field.rawValue);
                                        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(DeleteIcon, { size: "lg" }), label: "Remove" })] }))] }, variant.name))) }), _jsxs("div", { className: "mt-2", children: [_jsx("div", { className: "mb-1", children: "Alt Text" }), _jsx(Input, { value: altText, disabled: readOnly || !canEditAltText, className: "focus-shadow border-neutral-grey-10 bg-neutral-grey-5 w-full p-1.5 text-xs", onChange: (e) => {
                            setAltText(e.target.value);
                            const raw = tryParsePictureRawValue(field.rawValue);
                            if (!raw?.Variants?.some((variant) => variant.MediaId || variant.VideoId)) {
                                return;
                            }
                            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