"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 { useEffect, useState } from "react";
import { ImageEditor } from "../ImageEditor";
export function ImageFieldEditor({ field, readOnly, }) {
    const editContext = useEditContext();
    const [altText, setAltText] = useState("");
    if (!field || !editContext)
        return null;
    function updateAltText(rawValue, newAltText) {
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(rawValue, "text/xml");
        const imageElement = xmlDoc.documentElement;
        imageElement.setAttribute("alt", newAltText);
        return new XMLSerializer().serializeToString(xmlDoc);
    }
    var item = field.descriptor.item;
    useEffect(() => {
        setAltText(field.value?.alt || "");
    }, [field.value?.alt]);
    return (_jsxs("div", { children: [_jsx("div", { className: "focus-shadow bg-neutral-grey-5 flex h-full flex-wrap gap-2 rounded-md", children: _jsx("div", { className: "border-border-default relative flex h-48 w-48 cursor-pointer items-center justify-center border", children: !readOnly && _jsx(ImageEditor, { field: field }) }) }), _jsxs("div", { className: "mt-2", children: [_jsx("div", { className: "mb-1", children: "Alt Text" }), _jsx(Input, { value: altText, disabled: readOnly, className: "focus-shadow bg-neutral-grey-5 w-full p-1.5 text-xs", onChange: (e) => {
                            setAltText(e.target.value);
                            if (field.value)
                                field.value.alt = e.target.value;
                            editContext.operations.editField({
                                field: field.descriptor,
                                rawValue: updateAltText(field.rawValue || "", e.target.value),
                                refresh: "waitForQuietPeriod",
                            });
                        } }, item.id + field.id + item.language + item.version)] })] }));
}
//# sourceMappingURL=ImageFieldEditor.js.map