"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { LinkEditorDialog } from "../LinkEditorDialog";
import { useEditContext } from "../client/editContext";
import { cn } from "../../lib/utils";
import { Link as LinkIcon } from "lucide-react";
export function LinkFieldEditor({ field, readOnly, }) {
    const editContext = useEditContext();
    const [showDialog, setShowDialog] = useState(false);
    const [link, setLink] = useState();
    useEffect(() => {
        if (!field.value)
            return;
        setLink({
            url: field.value.url,
            target: field.value.target,
            targetItemLongId: field.value.targetItemLongId,
            type: field.value.type,
            itemId: field.value.targetItemLongId?.split("/").pop(),
            queryString: field.value.queryString,
            text: field.value.text,
            title: field.value.title,
            nofollow: field.value.nofollow,
        });
    }, [field]);
    if (!field.value)
        return;
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn("focus-shadow border-border-default bg-neutral-grey-5 flex justify-between rounded-[4px] border p-1.5", readOnly ? "bg-neutral-grey-5" : "cursor-pointer"), onClick: (e) => {
                    if (readOnly)
                        return;
                    setShowDialog(true);
                    e.preventDefault();
                }, children: [_jsx("div", { children: field.value.url }), _jsx(LinkIcon, { className: "h-4 w-4", strokeWidth: 1 })] }), showDialog && (_jsx(LinkEditorDialog, { linkValue: link || { type: "internal" }, showText: true, onOk: (link) => {
                    const title = (link.title ?? "").replace(/"/g, "&quot;");
                    const relAttr = link.nofollow ? ' rel="nofollow"' : "";
                    const xml = link.type == "internal"
                        ? '<link linktype="internal" querystring="' +
                            (link.queryString ?? "") +
                            '" text="' +
                            (link.text ?? "") +
                            '" title="' +
                            title +
                            '" id="' +
                            link.itemId +
                            '" target="' +
                            link.target +
                            '"' +
                            relAttr +
                            " />"
                        : '<link linktype="external" querystring="' +
                            (link.queryString ?? "") +
                            '" text="' +
                            (link.text ?? "") +
                            '" title="' +
                            title +
                            '" url="' +
                            link.url +
                            '" target="' +
                            link.target +
                            '"' +
                            relAttr +
                            " />";
                    editContext?.operations.editField({
                        field: field.descriptor,
                        rawValue: xml,
                        refresh: "immediate",
                    });
                    setShowDialog(false);
                }, onCancel: () => {
                    setShowDialog(false);
                } }))] }));
}
//# sourceMappingURL=LinkFieldEditor.js.map