"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const react_2 = __importDefault(require("react"));
const ui_1 = require("@flyde/ui");
const MAX_CASES = 6;
const SwitchEditor = function SwitchEditor(props) {
    const { value, onChange } = props;
    const inputsElem = (0, react_1.useMemo)(() => {
        const inputs = value.inputs.map((input, i) => {
            return (react_2.default.createElement("div", { key: i, style: { marginBottom: "1rem" } },
                react_2.default.createElement(ui_1.Label, { style: { marginBottom: "0.5rem", display: "block" } },
                    "Input name no. ",
                    i + 1,
                    ":"),
                react_2.default.createElement("div", { style: { display: "flex", gap: "0.5rem" } },
                    react_2.default.createElement(ui_1.Input, { value: input, onChange: (e) => {
                            const newInputs = [...value.inputs];
                            newInputs[i] = e.target.value;
                            onChange({ ...value, inputs: newInputs });
                        } }),
                    value.inputs.length > 1 && (react_2.default.createElement(ui_1.Button, { variant: "outline", size: "sm", onClick: () => {
                            const newInputs = [...value.inputs];
                            newInputs.splice(i, 1);
                            onChange({ ...value, inputs: newInputs });
                        } }, "X")))));
        });
        return (react_2.default.createElement("div", null,
            inputs,
            inputs.length < 6 && (react_2.default.createElement(ui_1.Button, { variant: "outline", onClick: () => {
                    const newInputs = [...value.inputs];
                    newInputs.push(`value${newInputs.length + 1}`);
                    onChange({ ...value, inputs: newInputs });
                }, style: { marginTop: "0.5rem" } }, "Add input"))));
    }, [onChange, value]);
    const casesElem = (0, react_1.useMemo)(() => {
        const cases = value.cases.map((case_, i) => {
            return (react_2.default.createElement("div", { key: i, style: { marginBottom: "2rem" } },
                react_2.default.createElement("div", { style: { marginBottom: "1rem" } },
                    react_2.default.createElement(ui_1.Label, { style: { marginBottom: "0.5rem", display: "block" } },
                        "Case no. ",
                        i + 1,
                        " name:"),
                    react_2.default.createElement("div", { style: { display: "flex", gap: "0.5rem" } },
                        react_2.default.createElement(ui_1.Input, { value: case_.name, onChange: (e) => {
                                const newCases = [...value.cases];
                                newCases[i] = { ...newCases[i], name: e.target.value };
                                onChange({ ...value, cases: newCases });
                            } }),
                        value.cases.length > 1 && (react_2.default.createElement(ui_1.Button, { variant: "outline", size: "sm", onClick: () => {
                                const newCases = [...value.cases];
                                newCases.splice(i, 1);
                                onChange({ ...value, cases: newCases });
                            } }, "X")))),
                react_2.default.createElement("div", { style: { marginBottom: "1rem" } },
                    react_2.default.createElement(ui_1.Label, { style: { marginBottom: "0.5rem", display: "block" } },
                        "Case no. ",
                        i + 1,
                        " condition expression:"),
                    react_2.default.createElement(ui_1.Input, { value: case_.conditionExpression, onChange: (e) => {
                            const newCases = [...value.cases];
                            newCases[i] = {
                                ...newCases[i],
                                conditionExpression: e.target.value,
                            };
                            onChange({ ...value, cases: newCases });
                        } }),
                    react_2.default.createElement("p", { style: {
                            fontSize: "0.875rem",
                            color: "#666",
                            marginTop: "0.25rem",
                        } }, "The condition to evaluate to check whether this case should be activated. any JS expression. You can access the inputs data using the inputs object.")),
                react_2.default.createElement("div", { style: { marginBottom: "1rem" } },
                    react_2.default.createElement(ui_1.Label, { style: { marginBottom: "0.5rem", display: "block" } },
                        "Case no. ",
                        i + 1,
                        " output expression:"),
                    react_2.default.createElement(ui_1.Input, { value: case_.outputExpression, onChange: (e) => {
                            const newCases = [...value.cases];
                            newCases[i] = {
                                ...newCases[i],
                                outputExpression: e.target.value,
                            };
                            onChange({ ...value, cases: newCases });
                        } }),
                    react_2.default.createElement("p", { style: {
                            fontSize: "0.875rem",
                            color: "#666",
                            marginTop: "0.25rem",
                        } }, "The expression to output if this case is activated. Accepts any JS expression. You can access the inputs data using the inputs object."))));
        });
        return (react_2.default.createElement("div", null,
            cases,
            cases.length < MAX_CASES && (react_2.default.createElement(ui_1.Button, { variant: "outline", onClick: () => {
                    const newCases = [...value.cases];
                    newCases.push({
                        name: `case${newCases.length + 1}`,
                        conditionExpression: "",
                        outputExpression: "",
                    });
                    onChange({ ...value, cases: newCases });
                }, style: { marginTop: "0.5rem" } }, "Add case"))));
    }, [onChange, value]);
    return (react_2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "1.5rem" } },
        inputsElem,
        react_2.default.createElement(ui_1.Separator, null),
        casesElem,
        react_2.default.createElement(ui_1.Separator, null),
        react_2.default.createElement("div", null,
            react_2.default.createElement("div", { style: { marginBottom: "1rem" } },
                react_2.default.createElement(ui_1.Checkbox, { checked: value.defaultCase.enabled, onCheckedChange: (checked) => {
                        onChange({
                            ...value,
                            defaultCase: {
                                enabled: !!checked,
                                outputExpression: checked ? "" : undefined,
                            },
                        });
                    }, label: "Enable default case (if no case is activated). If disabled, reaching a case that is not activated will output an error." })),
            value.defaultCase.enabled && (react_2.default.createElement("div", null,
                react_2.default.createElement(ui_1.Label, { style: { marginBottom: "0.5rem", display: "block" } }, "Default case output expression:"),
                react_2.default.createElement(ui_1.Input, { value: value.defaultCase.outputExpression, onChange: (e) => {
                        onChange({
                            ...value,
                            defaultCase: {
                                enabled: true,
                                outputExpression: e.target.value,
                            },
                        });
                    } }),
                react_2.default.createElement("p", { style: {
                        fontSize: "0.875rem",
                        color: "#666",
                        marginTop: "0.25rem",
                    } }, "The expression to output if no case is activated. Accepts any JS expression. You can access the inputs data using the inputs object."))))));
};
exports.default = SwitchEditor;
