import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { InputLabel } from "@material-ui/core";
import styled from "styled-components";
import { PlusWhiteIcon } from "../Icon/PlusWhiteIcon";
import { StyledSwitch } from "./PropertyEditorStyles";
import { StyledIconButton } from "../CommonStyles";
const StyledBooleanList = styled.div `
    width: 100%;

    .BooleanList {
        display: flex;
        flex-direction: column;
        max-width: 50px;
    }
    .BooleanList-Label {
        color: #677c95;
        font-family: Mulish;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .BooleanList-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
`;
export 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 (_jsxs(StyledBooleanList, Object.assign({ className: "PropertyList-Wrapper BooleanList-Wrapper" }, { children: [!props.bottomHeader && (_jsxs("div", Object.assign({ className: "BooleanList-header" }, { children: [props.label && _jsx(InputLabel, Object.assign({ classes: { root: "BooleanList-Label" } }, { children: props.label }), void 0),
                    _jsx(StyledIconButton, Object.assign({ "data-testid": `property-editor-boolean-add`, color: "primary", onClick: add }, { children: _jsx(PlusWhiteIcon, {}, void 0) }), void 0)] }), void 0)),
            _jsx("div", Object.assign({ className: "BooleanList", "data-testid": "property-editor-boolean-list" }, { children: values &&
                    values.map((val, idx) => (_jsx(StyledSwitch, { "data-testid": `valueEditor-${props.propertyName}-${idx}`, checked: val, onChange: (e) => onChange(e, idx) }, idx))) }), void 0),
            props.bottomHeader && (_jsxs("div", Object.assign({ className: "BooleanList-header" }, { children: [props.label && _jsx(InputLabel, Object.assign({ classes: { root: "BooleanList-Label" } }, { children: props.label }), void 0),
                    _jsx(StyledIconButton, Object.assign({ color: "primary", onClick: add, classes: { root: "PropertyList-Add" } }, { children: _jsx(PlusWhiteIcon, {}, void 0) }), void 0)] }), void 0))] }), void 0));
};
//# sourceMappingURL=PropertyEditorBooleanList.js.map