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

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

        > * {
            margin-top: 5px;

            &:first-child {
                margin-top: 0;
            }
        }
    }
    .DateList-Label {
        color: rgba(0, 0, 0, 0.54);
        font-family: Mulish;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .DateList-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
`;
export const PropertyEditorDateList = (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.value;
            update(values);
        }
    };
    const add = () => {
        values.push("");
        update(values);
    };
    return (_jsxs(StyledDateList, Object.assign({ className: "PropertyList-Wrapper DateList-Wrapper" }, { children: [!props.bottomHeader && (_jsxs("div", Object.assign({ className: "DateList-header" }, { children: [props.label && _jsx(InputLabel, Object.assign({ classes: { root: "DateList-Label" } }, { children: props.label }), void 0),
                    _jsx(StyledIconButton, Object.assign({ onClick: add, color: "primary" }, { children: _jsx(PlusWhiteIcon, {}, void 0) }), void 0)] }), void 0)),
            _jsx("div", Object.assign({ className: "DateList", "data-testid": "property-editor-date-list" }, { children: values &&
                    values.map((val, idx) => (_jsx(StyledTextField, { value: val, onChange: (e) => onChange(e, idx), type: props.type || "date", autoFocus: props.autFocus && idx === 0 }, idx))) }), void 0),
            props.bottomHeader && (_jsxs("div", Object.assign({ className: "DateList-header" }, { children: [props.label && _jsx(InputLabel, Object.assign({ classes: { root: "DateList-Label" } }, { children: props.label }), void 0),
                    _jsx(StyledIconButton, Object.assign({ onClick: add, color: "primary", classes: { root: "PropertyList-Add" } }, { children: _jsx(PlusWhiteIcon, {}, void 0) }), void 0)] }), void 0))] }), void 0));
};
//# sourceMappingURL=PropertyEditorDateList.js.map