"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createConfigurableInputEditor = exports.ConfigurableInputEditor = void 0;
const react_1 = __importDefault(require("react"));
const ui_1 = require("@flyde/ui");
const ui_2 = require("@flyde/ui");
const ConfigurableInputEditor = function ({ value, onChange, valueRenderer: ValueRenderer, defaultStaticValue, modeLabel, }) {
    const handleModeChange = (newMode) => {
        onChange({
            mode: newMode,
            value: newMode === "static" ? defaultStaticValue : undefined,
        });
    };
    const handleValueChange = (value) => {
        onChange({
            value,
            mode: "static",
        });
    };
    const MemoValueRenderer = react_1.default.useMemo(() => ValueRenderer, [ValueRenderer]);
    return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } },
        react_1.default.createElement("div", { style: { marginBottom: "4px" } },
            react_1.default.createElement(ui_2.Label, null, modeLabel)),
        react_1.default.createElement(ui_1.RadioGroup, { value: value.mode, onValueChange: handleModeChange, style: { display: "flex", gap: "12px" } },
            react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } },
                react_1.default.createElement(ui_1.RadioGroupItem, { value: "static", id: "static" }),
                react_1.default.createElement(ui_2.Label, { htmlFor: "static" }, "Static")),
            react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } },
                react_1.default.createElement(ui_1.RadioGroupItem, { value: "dynamic", id: "dynamic" }),
                react_1.default.createElement(ui_2.Label, { htmlFor: "dynamic" }, "Dynamic"))),
        value.mode === "static" ? (react_1.default.createElement(MemoValueRenderer, { value: value.value, onChange: handleValueChange })) : null));
};
exports.ConfigurableInputEditor = ConfigurableInputEditor;
const createConfigurableInputEditor = (valueRenderer) => {
    return (props) => (react_1.default.createElement(exports.ConfigurableInputEditor, { ...props, valueRenderer: valueRenderer }));
};
exports.createConfigurableInputEditor = createConfigurableInputEditor;
