"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MacroConfigurableFieldEditor = MacroConfigurableFieldEditor;
const ui_1 = require("@flyde/ui");
const MacroConfigurableValueBaseEditor_1 = require("./MacroConfigurableValueBaseEditor");
const react_1 = require("react");
const convertValues_1 = require("./convertValues");
const react_2 = __importDefault(require("react"));
const ui_2 = require("@flyde/ui");
function FieldContent({ config, value, onChange, handleDialogToggle, isExpanded, onTypeChange, }) {
    const shouldShowExpand = !isExpanded &&
        (value.type === "json" ||
            (value.type === "string" && config.type === "longtext"));
    const typeOptions = [
        "dynamic",
        "number",
        "boolean",
        "json",
        "string",
    ];
    return (react_2.default.createElement("div", { className: "mb-1 font-medium flex items-center gap-2 justify-between" },
        react_2.default.createElement("div", { className: "flex items-center gap-2" },
            config.label,
            ":"),
        react_2.default.createElement("div", { className: "flex items-center gap-2" },
            config.typeConfigurable !== false && onTypeChange && (react_2.default.createElement("div", { className: "text-xs text-gray-500 flex items-center gap-1" },
                react_2.default.createElement("span", { className: "capitalize" }, value.type),
                react_2.default.createElement(ui_1.DropdownMenu, null,
                    react_2.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
                        react_2.default.createElement(ui_1.Button, { variant: "link", size: "xs", className: "h-4 p-0 text-xs" },
                            react_2.default.createElement(ui_2.Settings, { className: "h-4 w-4" }))),
                    react_2.default.createElement(ui_1.DropdownMenuContent, { align: "end" }, typeOptions.map((type) => (react_2.default.createElement(ui_1.DropdownMenuItem, { key: type, onClick: () => onTypeChange(type) },
                        react_2.default.createElement("div", { className: "flex items-center justify-between w-full" },
                            react_2.default.createElement("span", { className: "capitalize" }, type),
                            value.type === type && react_2.default.createElement(ui_1.Check, { className: "h-4 w-4 ml-2" }))))))))),
            config.aiCompletion && (react_2.default.createElement("div", { className: isExpanded
                    ? ""
                    : "opacity-0 group-hover:opacity-100 transition-opacity" },
                react_2.default.createElement(ui_1.AiGenerate, { prompt: config.aiCompletion.prompt, placeholder: config.aiCompletion.placeholder, jsonMode: config.aiCompletion.jsonMode, currentValue: value.value, onComplete: (text) => {
                        try {
                            const parsed = JSON.parse(text);
                            onChange({
                                ...value,
                                value: parsed,
                            });
                        }
                        catch {
                            onChange({ ...value, value: text });
                        }
                    } }))),
            shouldShowExpand && handleDialogToggle && (react_2.default.createElement(ui_1.Button, { variant: "outline", size: "xs", onClick: handleDialogToggle },
                react_2.default.createElement(ui_1.Expand, { size: 12 }))))));
}
function MacroConfigurableFieldEditor(props) {
    const { config, value, onChange, ports } = props;
    const [isDialogOpen, setIsDialogOpen] = (0, react_1.useState)(false);
    const [rawJsonData, setRawJsonData] = (0, react_1.useState)(value.type === "json" ? JSON.stringify(value.value, null, 2) : "");
    (0, react_1.useEffect)(() => {
        if (value.type === "json" && typeof value.value !== "string") {
            setRawJsonData(JSON.stringify(value.value, null, 2));
        }
    }, [value]);
    const changeType = (0, react_1.useCallback)((newType) => {
        const newValue = (0, convertValues_1.convertValue)(value.type, newType, value.value);
        onChange({ type: newType, value: newValue });
    }, [value, onChange]);
    const handleDialogToggle = () => {
        setIsDialogOpen(!isDialogOpen);
    };
    const isTemplateSupported = ((value.type === "string" && config.type !== 'secret') || value.type === "json") &&
        config.templateSupport !== false;
    return (react_2.default.createElement("div", { className: "mb-4 group" },
        react_2.default.createElement(FieldContent, { config: config, value: value, onChange: onChange, handleDialogToggle: handleDialogToggle, onTypeChange: changeType }),
        react_2.default.createElement(MacroConfigurableValueBaseEditor_1.MacroConfigurableValueBaseEditor, { value: value, onChange: onChange, fieldDefinition: config, isExpanded: false, rawJsonData: rawJsonData, onRawJsonDataChange: setRawJsonData, ports: ports }),
        react_2.default.createElement("div", { className: "mt-2 flex justify-between items-center" },
            config.description ? (react_2.default.createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400 italic" }, config.description)) : (react_2.default.createElement("div", null)),
            isTemplateSupported && (react_2.default.createElement(ui_1.TooltipProvider, { delayDuration: 0 },
                react_2.default.createElement(ui_1.Tooltip, null,
                    react_2.default.createElement(ui_1.TooltipTrigger, { asChild: true },
                        react_2.default.createElement(ui_1.Button, { variant: "ghost", size: "xs", className: "p-0 h-4 text-xs text-gray-500" },
                            "Variables supported ",
                            react_2.default.createElement(ui_1.Info, { className: "h-3 w-3 text-gray-500 ml-1" }))),
                    react_2.default.createElement(ui_1.TooltipContent, { className: "max-w-[300px]" }, "Use {{ }} to insert variables. For example {{myVar}} or {{myVar.someProp}}. Each distinct variable will be exposed as an input and can be used to receive dynamic values from other nodes."))))),
        react_2.default.createElement(ui_1.Dialog, { open: isDialogOpen, onOpenChange: setIsDialogOpen, modal: false },
            react_2.default.createElement(ui_1.DialogTrigger, { asChild: true },
                react_2.default.createElement("button", { className: "hidden" }, "Open Dialog")),
            react_2.default.createElement(ui_1.DialogContent, { className: "max-w-screen-lg w-[90vw] !h-[90vh] !w-[90vw]", noCloseButton: true, noInteractOutside: true },
                react_2.default.createElement(FieldContent, { config: config, value: value, onChange: onChange, isExpanded: true, onTypeChange: isDialogOpen ? changeType : undefined }),
                react_2.default.createElement(MacroConfigurableValueBaseEditor_1.MacroConfigurableValueBaseEditor, { value: value, onChange: onChange, fieldDefinition: config, isExpanded: true, rawJsonData: rawJsonData, onRawJsonDataChange: setRawJsonData, ports: ports }),
                react_2.default.createElement("div", { className: "mt-2 flex justify-between items-center" },
                    config.description ? (react_2.default.createElement("div", { className: "text-xs text-gray-500 dark:text-gray-400 italic" }, config.description)) : (react_2.default.createElement("div", null)),
                    isTemplateSupported && (react_2.default.createElement(ui_1.TooltipProvider, { delayDuration: 0 },
                        react_2.default.createElement(ui_1.Tooltip, null,
                            react_2.default.createElement(ui_1.TooltipTrigger, { asChild: true },
                                react_2.default.createElement(ui_1.Button, { variant: "ghost", size: "xs", className: "p-0 h-4 text-xs text-gray-500" },
                                    "Variables supported ",
                                    react_2.default.createElement(ui_1.Info, { className: "h-3 w-3 text-gray-500 ml-1" }))),
                            react_2.default.createElement(ui_1.TooltipContent, null, "Use {{ }} to insert variables. For example {{myVar}} or {{myVar.someProp}}"))))),
                react_2.default.createElement("div", { className: "mt-6 flex justify-end" },
                    react_2.default.createElement(ui_1.Button, { onClick: () => setIsDialogOpen(false) }, "Close"))))));
}
