"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MacroConfigurableValueBaseEditor = MacroConfigurableValueBaseEditor;
const ui_1 = require("@flyde/ui");
const SimpleJsonEditor_1 = require("../SimpleJsonEditor");
const react_1 = require("react");
const react_2 = __importDefault(require("react"));
const SecretSelector_1 = require("./SecretSelector");
const inputClassName = "w-full";
function MacroConfigurableValueBaseEditor(props) {
    var _a, _b, _c, _d;
    const { value, onChange, fieldDefinition, ports, isExpanded, rawJsonData, onRawJsonDataChange, } = props;
    const { prompt: _prompt } = ports;
    const [options, setOptions] = (0, react_1.useState)((fieldDefinition.type === "select"
        ? fieldDefinition.typeData.options
        : []).map((opt) => typeof opt === "object" ? opt : { value: opt, label: String(opt) }) || []);
    // Track raw JSON data internally if not provided from parent
    const [internalRawJsonData, setInternalRawJsonData] = (0, react_1.useState)(rawJsonData ||
        (value.type === "json" ? JSON.stringify(value.value, null, 2) : ""));
    // Update internal state when rawJsonData prop changes
    (0, react_1.useEffect)(() => {
        if (rawJsonData !== undefined && value.type === "json") {
            setInternalRawJsonData(rawJsonData);
        }
    }, [rawJsonData, value.type]);
    // Handle raw JSON data changes
    const handleRawJsonDataChange = (rawData) => {
        setInternalRawJsonData(rawData);
        if (onRawJsonDataChange) {
            onRawJsonDataChange(rawData);
        }
    };
    (0, react_1.useEffect)(() => {
        if (fieldDefinition.type === "select" &&
            !options.some((option) => option.value === value.value) &&
            fieldDefinition.typeConfigurable !== false) {
            setOptions([
                ...options,
                { value: value.value, label: String(value.value) },
            ]);
        }
    }, [value, options, fieldDefinition.type, fieldDefinition.typeConfigurable]);
    const handleAddOption = async () => {
        if (fieldDefinition.typeConfigurable === false) {
            return; // Don't allow adding options when typeConfigurable is false
        }
        const newOption = await _prompt({ text: "Enter a new option:" });
        if (newOption && !options.some((option) => option.value === newOption)) {
            const updatedOptions = [
                ...options,
                {
                    value: newOption,
                    label: newOption,
                },
            ];
            setOptions(updatedOptions);
            onChange({ type: "select", value: newOption });
        }
    };
    switch (value.type) {
        case "number":
            return (react_2.default.createElement(ui_1.Input, { type: "number", value: value.value, onChange: (e) => props.onChange({
                    type: "number",
                    value: parseFloat(e.target.value),
                }), min: fieldDefinition.type === "number" && ((_a = fieldDefinition.typeData) === null || _a === void 0 ? void 0 : _a.min) !== undefined ? fieldDefinition.typeData.min : undefined, max: fieldDefinition.type === "number" && ((_b = fieldDefinition.typeData) === null || _b === void 0 ? void 0 : _b.max) !== undefined ? fieldDefinition.typeData.max : undefined, className: inputClassName }));
        case "string": {
            // Special handling for secrets
            if (fieldDefinition.type === "secret" && ports) {
                return (react_2.default.createElement(SecretSelector_1.SecretSelector, { value: value.value, onChange: (newValue) => props.onChange({ type: "string", value: newValue }), ports: ports, typeEditorData: fieldDefinition.typeData }));
            }
            if (fieldDefinition.type === "longtext") {
                return (react_2.default.createElement(ui_1.Textarea, { value: value.value, onChange: (e) => props.onChange({ type: "string", value: e.target.value }), rows: (_d = (_c = fieldDefinition.typeData) === null || _c === void 0 ? void 0 : _c.rows) !== null && _d !== void 0 ? _d : 5, style: {
                        minWidth: isExpanded ? "65vw" : "100%",
                        height: isExpanded ? "65vh" : undefined,
                    } }));
            }
            else {
                return (react_2.default.createElement(ui_1.Input, { value: value.value, onChange: (e) => props.onChange({ type: "string", value: e.target.value }), className: inputClassName }));
            }
        }
        case "json":
            return (react_2.default.createElement(SimpleJsonEditor_1.SimpleJsonEditor, { value: value.value, onChange: (value) => props.onChange({ type: "json", value }), isExpanded: isExpanded, rawData: rawJsonData || internalRawJsonData, onChangeRaw: handleRawJsonDataChange }));
        case "boolean":
            return (react_2.default.createElement(ui_1.Checkbox, { checked: value.value, onCheckedChange: (checked) => props.onChange({ type: "boolean", value: checked === true }) }));
        case "select": {
            return (react_2.default.createElement(ui_1.Select, { value: String(value.value), onValueChange: (val) => {
                    if (val === "__other__") {
                        handleAddOption();
                    }
                    else {
                        props.onChange({ type: "select", value: val });
                    }
                } },
                react_2.default.createElement(ui_1.SelectTrigger, { className: inputClassName },
                    react_2.default.createElement(ui_1.SelectValue, null)),
                react_2.default.createElement(ui_1.SelectContent, null,
                    options.map((option) => (react_2.default.createElement(ui_1.SelectItem, { key: String(option.value), value: String(option.value) }, option.label))),
                    fieldDefinition.typeConfigurable !== false && (react_2.default.createElement(ui_1.SelectItem, { value: "__other__" }, "Other (add new option)")))));
        }
        case "dynamic":
            return (react_2.default.createElement(ui_1.Input, { value: `{{${fieldDefinition.configKey}}}`, disabled: true, className: inputClassName }));
        default:
            return (react_2.default.createElement("span", { className: "text-gray-500 dark:text-gray-400 italic" },
                "Trying to render unsupported type: [", value === null || value === void 0 ? void 0 :
                value.type,
                "]"));
    }
}
