"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"));
function FieldContent({ config, value, onChange, handleDialogToggle, isExpanded, }) {
    const shouldShowExpand = !isExpanded &&
        (value.type === "json" ||
            (value.type === "string" && config.type === "longtext"));
    return (react_2.default.createElement("div", { className: "mb-1 font-medium flex items-center gap-2 justify-between" },
        config.label,
        ":",
        react_2.default.createElement("div", { className: "flex items-center gap-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, prompt } = 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 typeOptions = [
        "dynamic",
        "number",
        "boolean",
        "json",
        "string",
    ];
    const helperText = (0, react_1.useMemo)(() => {
        const isTemplateSupported = (value.type === "string" || value.type === "json") &&
            config.templateSupport !== false;
        return (react_2.default.createElement("div", { style: {
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                marginTop: "4px",
                fontSize: "12px",
                color: "#666",
            } },
            react_2.default.createElement("span", null, isTemplateSupported
                ? "Use {{ }} to insert variables. For example {{myVar}}"
                : ""),
            !isDialogOpen && config.typeConfigurable !== false ? (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: "ghost", size: "sm", className: "h-8" },
                        react_2.default.createElement(ui_1.Settings, { className: "h-4 w-4 mr-2" }),
                        "Change type")),
                react_2.default.createElement(ui_1.DropdownMenuContent, { align: "end" }, typeOptions.map((type) => (react_2.default.createElement(ui_1.DropdownMenuItem, { key: type, onClick: () => changeType(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" })))))))) : null));
    }, [changeType, config, value.type, isDialogOpen]);
    return (react_2.default.createElement("div", { className: "mb-4 group" },
        react_2.default.createElement(FieldContent, { config: config, value: value, onChange: onChange, handleDialogToggle: handleDialogToggle }),
        react_2.default.createElement(MacroConfigurableValueBaseEditor_1.MacroConfigurableValueBaseEditor, { value: value, onChange: onChange, fieldDefinition: config, prompt: prompt, isExpanded: false, rawJsonData: rawJsonData, onRawJsonDataChange: setRawJsonData }),
        config.description && (react_2.default.createElement("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400 italic" }, config.description)),
        helperText,
        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 }),
                react_2.default.createElement(MacroConfigurableValueBaseEditor_1.MacroConfigurableValueBaseEditor, { value: value, onChange: onChange, fieldDefinition: config, prompt: prompt, isExpanded: true, rawJsonData: rawJsonData, onRawJsonDataChange: setRawJsonData }),
                config.description && (react_2.default.createElement("div", { className: "mt-2 text-xs text-gray-500 dark:text-gray-400 italic" }, config.description)),
                helperText,
                react_2.default.createElement("div", { className: "mt-6 flex justify-end" },
                    react_2.default.createElement(ui_1.Button, { onClick: () => setIsDialogOpen(false) }, "Close"))))));
}
