"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyEditorDateList = 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 PropertyEditorStyles_1 = require("./PropertyEditorStyles");
const PlusWhiteIcon_1 = require("../Icon/PlusWhiteIcon");
const CommonStyles_1 = require("../CommonStyles");
const StyledDateList = styled_components_1.default.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-style: normal;
        font-weight: 600;
        margin-bottom: 5px;
    }

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