"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyEditorBooleanList = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const PlusWhiteIcon_1 = require("../Icon/PlusWhiteIcon");
const PropertyEditorStyles_1 = require("./PropertyEditorStyles");
const CommonStyles_1 = require("../CommonStyles");
const StyledBooleanList = styled_components_1.default.div `
    width: 100%;

    .BooleanList {
        display: flex;
        flex-direction: column;
        max-width: 50px;
    }
    .BooleanList-Label {
        color: #677c95;

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

    .BooleanList-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
`;
const PropertyEditorBooleanList = (props) => {
    const values = Reflect.get(props.editObject, props.propertyName) || [];
    const update = (vals) => {
        Reflect.set(props.editObject, props.propertyName, vals);
        props.updateCallback();
    };
    const onChange = (event, selectedLine) => {
        if (selectedLine >= 0) {
            values[selectedLine] = event.target.checked;
            update(values);
        }
    };
    const add = () => {
        values.push(false);
        update(values);
    };
    return ((0, jsx_runtime_1.jsxs)(StyledBooleanList, { className: "PropertyList-Wrapper BooleanList-Wrapper", children: [!props.bottomHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "BooleanList-header", children: [props.label && (0, jsx_runtime_1.jsx)(core_1.InputLabel, { classes: { root: "BooleanList-Label" }, children: props.label }), (0, jsx_runtime_1.jsx)(CommonStyles_1.StyledIconButton, { "data-testid": `property-editor-boolean-add`, color: "primary", onClick: add, children: (0, jsx_runtime_1.jsx)(PlusWhiteIcon_1.PlusWhiteIcon, {}) })] })), (0, jsx_runtime_1.jsx)("div", { className: "BooleanList", "data-testid": "property-editor-boolean-list", children: values &&
                    values.map((val, idx) => ((0, jsx_runtime_1.jsx)(PropertyEditorStyles_1.StyledSwitch, { "data-testid": `valueEditor-${props.propertyName}-${idx}`, checked: val, onChange: (e) => onChange(e, idx) }, idx))) }), props.bottomHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "BooleanList-header", children: [props.label && (0, jsx_runtime_1.jsx)(core_1.InputLabel, { classes: { root: "BooleanList-Label" }, children: props.label }), (0, jsx_runtime_1.jsx)(CommonStyles_1.StyledIconButton, { color: "primary", onClick: add, classes: { root: "PropertyList-Add" }, children: (0, jsx_runtime_1.jsx)(PlusWhiteIcon_1.PlusWhiteIcon, {}) })] }))] }));
};
exports.PropertyEditorBooleanList = PropertyEditorBooleanList;
//# sourceMappingURL=PropertyEditorBooleanList.js.map