import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Switch } from "@material-ui/core";
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { DeleteGrayIcon } from "../Icon/DeleteGrayIcon";
import { DeleteButton, Row } from "./DesignUI";
import { StyledLink } from "../BuildUI/Link";
import { ListValueRender } from "./DisplayModeRender";
export const DisplayModeBooleanValueEditor = ({ value, forData }) => {
    let label = null;
    return (_jsxs("div", Object.assign({ className: "ValueEditor-display", "data-testid": "ValueEditor-Boolean-Display-switch" }, { children: [label, Array.isArray(value) ? (_jsx(ListValueRender, { values: value }, void 0)) : (_jsx(Switch, { inputProps: {
                    "aria-label": forData.name,
                    readOnly: true,
                }, name: forData.name, color: "primary", checked: value, "data-testid": `${forData.name}-value-switch` }, void 0))] }), void 0));
};
export const EditModeBooleanValueEditor = React.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 _jsx(EditorBooleanList, { values: values, updateCallback: onValueUpdate }, void 0);
    }
    return (_jsx("div", Object.assign({ className: "ValueEditor-display", "data-testid": "ValueEditor-Boolean-Edit-switch" }, { children: _jsx(Switch, { inputProps: { "aria-label": forData.name }, name: forData.name, color: "primary", inputRef: ref, checked: values, onChange: (event) => {
                onUpdate(event.target.checked);
            }, "data-testid": `${forData.name}-value-switch` }, void 0) }), void 0));
});
export const EditorBooleanList = (props) => {
    const [values, setValues] = useState(props.values);
    useEffect(() => {
        setValues([...props.values]);
    }, [props.values, setValues]);
    const update = (vals) => {
        props.updateCallback(vals);
        setValues([...vals]);
    };
    const onChange = (event, selectedLine) => {
        if (selectedLine >= 0) {
            values[selectedLine] = event.target.checked;
            update(values);
        }
    };
    const add = () => {
        values.push(false);
        update(values);
    };
    const remove = (index) => {
        values.splice(index, 1);
        update(values);
    };
    return (_jsxs(StyledBooleanList, Object.assign({ className: "PropertyList-Wrapper BooleanList-Wrapper", "data-testid": "ValueEditor-BooleanList-Edit-switch" }, { children: [_jsx("div", Object.assign({ className: "BooleanList" }, { children: values &&
                    values.map((val, idx) => (_jsxs(Row, { children: [_jsx(Switch, { checked: val, onChange: (e) => onChange(e, idx), color: "primary" }, idx),
                            _jsx(DeleteButton, Object.assign({ onClick: () => remove(idx) }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0)] }, idx))) }), void 0),
            _jsx(StyledLink, Object.assign({ onClick: add, color: "primary", classes: { root: "PropertyList-Add" } }, { children: "Add" }), void 0)] }), void 0));
};
const StyledBooleanList = styled.div `
    width: 100%;

    text-align: right;

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

        > div {
            margin-top: 5px;
            &:first-child {
                margin-top: 0;
            }
        }

        .MuiSwitch-root {
            display: flex;
        }
    }
    .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;
    }
`;
//# sourceMappingURL=Boolean.js.map