"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditorBooleanList = exports.EditModeBooleanValueEditor = exports.DisplayModeBooleanValueEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const DeleteGrayIcon_1 = require("../Icon/DeleteGrayIcon");
const DesignUI_1 = require("./DesignUI");
const Link_1 = require("../BuilderUI/Link");
const DisplayModeRender_1 = require("./DisplayModeRender");
const UISwitch_1 = require("../BuildlingBlocks/UISwitch");
const DisplayModeBooleanValueEditor = ({ value, forData }) => {
    let label = null;
    return ((0, jsx_runtime_1.jsxs)("div", { className: "ValueEditor-display", "data-testid": "ValueEditor-Boolean-Display-switch", children: [label, Array.isArray(value) ? ((0, jsx_runtime_1.jsx)(DisplayModeRender_1.ListValueRender, { values: value })) : ((0, jsx_runtime_1.jsx)(UISwitch_1.UISwitch, { checked: value, "data-testid": `${forData.name}-value-switch`, onSet: () => { } }))] }));
};
exports.DisplayModeBooleanValueEditor = DisplayModeBooleanValueEditor;
exports.EditModeBooleanValueEditor = react_1.default.forwardRef(({ value, forData, onUpdate }, _ref) => {
    let values = forData.list
        ? Array.isArray(value) && typeof value !== "string"
            ? value
            : [value]
        : Array.isArray(value) && typeof value !== "string"
            ? value[0]
            : value;
    const onValueUpdate = (newValues) => {
        onUpdate(newValues);
    };
    if (forData.list) {
        return (0, jsx_runtime_1.jsx)(exports.EditorBooleanList, { values: values, updateCallback: onValueUpdate });
    }
    return ((0, jsx_runtime_1.jsx)("div", { className: "ValueEditor-display", "data-testid": "ValueEditor-Boolean-Edit-switch", children: (0, jsx_runtime_1.jsx)(UISwitch_1.UISwitch, { checked: values, onSet: (newValue) => {
                onUpdate(newValue);
            }, "data-testid": `${forData.name}-value-switch` }) }));
});
const EditorBooleanList = (props) => {
    const [values, setValues] = (0, react_1.useState)(props.values);
    (0, react_1.useEffect)(() => {
        setValues([...props.values]);
    }, [props.values, setValues]);
    const update = (vals) => {
        props.updateCallback(vals);
        setValues([...vals]);
    };
    const onChange = (newValue, selectedLine) => {
        if (selectedLine >= 0) {
            values[selectedLine] = newValue;
            update(values);
        }
    };
    const add = () => {
        values.push(false);
        update(values);
    };
    const remove = (index) => {
        values.splice(index, 1);
        update(values);
    };
    return ((0, jsx_runtime_1.jsxs)(StyledBooleanList, { className: "PropertyList-Wrapper BooleanList-Wrapper", "data-testid": "ValueEditor-BooleanList-Edit-switch", children: [(0, jsx_runtime_1.jsx)("div", { className: "BooleanList", children: values &&
                    values.map((val, idx) => ((0, jsx_runtime_1.jsxs)(DesignUI_1.Row, { children: [(0, jsx_runtime_1.jsx)(UISwitch_1.UISwitch, { checked: val, onSet: (newValue) => onChange(newValue, idx) }, idx), (0, jsx_runtime_1.jsx)(DesignUI_1.DeleteButton, { onClick: () => remove(idx), children: (0, jsx_runtime_1.jsx)(DeleteGrayIcon_1.DeleteGrayIcon, {}) })] }, idx))) }), (0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: add, color: "primary", classes: { root: "PropertyList-Add" }, children: "Add" })] }));
};
exports.EditorBooleanList = EditorBooleanList;
const StyledBooleanList = styled_components_1.default.div `
    width: 100%;

    text-align: right;

    .BooleanList {
        display: flex;
        flex-direction: column;

        > div {
            margin-top: 5px;

            &:first-child {
                margin-top: 0;
            }
        }
    }

    .BooleanList-Label {
        color: #677c95;

        font-style: normal;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .BooleanList-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
`;
//# sourceMappingURL=Boolean.js.map