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

    .TextList-TextBox {
        position: relative;

        border-radius: 4px;

        padding: 0;

        transition: all 0.3s;

        .MuiInputBase-input {
            font-style: normal;
            font-weight: 400;
            padding: 6px 12px;

            color: rgba(39, 41, 50, 0.7);
            font-size: 14px;
        }

        .MuiOutlinedInput-notchedOutline {
            border: 1px solid rgba(39, 41, 50, 0.2);
            border-radius: 4px;
        }

        &.Mui-focused .MuiOutlinedInput-notchedOutline {
            border: solid 1px rgb(63, 81, 181);
        }
    }

    .TextList-SelectBox {
        display: flex;
        flex-direction: column;
    }

    .TextList-Label {
        color: rgb(63, 81, 181);

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

    .TextList-hint {
        color: rgba(0, 0, 0, 0.54);

        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 18px;
        margin-top: 5px;
        display: block;
    }

    .TextList-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
`;
const PropertyEditorTextList = (props) => {
    const [values, setValues] = (0, react_1.useState)(Reflect.get(props.editObject, props.propertyName) || []);
    const update = (vals) => {
        Reflect.set(props.editObject, props.propertyName, vals);
        props.updateCallback();
    };
    const onChange = (event) => {
        setValues([...event.target.value.split("\n")]);
    };
    const onSelect = (newValue, index) => {
        values[index] = newValue;
        update(values);
    };
    const onBlur = () => {
        update(values);
    };
    const add = () => {
        values.push("");
        update(values);
    };
    return ((0, jsx_runtime_1.jsxs)(StyledTextList, { "data-testid": `property-${props.propertyName}-text-list`, className: "PropertyList-Wrapper TextList-Wrapper", label: props.label, children: [!props.bottomHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "TextList-header", children: [props.label && (0, jsx_runtime_1.jsx)(core_1.InputLabel, { classes: { root: "TextList-Label" }, children: props.label }), props.validValues && props.validValues.length > 0 && ((0, jsx_runtime_1.jsx)(CommonStyles_1.StyledIconButton, { color: "primary", onClick: add, children: (0, jsx_runtime_1.jsx)(PlusWhiteIcon_1.PlusWhiteIcon, {}) }))] })), props.validValues && props.validValues.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "TextList-SelectBox", children: (values || []).map((val, idx) => ((0, jsx_runtime_1.jsx)(core_1.TextField, { value: val, onChange: (event) => {
                        onSelect(event.target.value, idx);
                    }, select: true, fullWidth: true, SelectProps: {
                        MenuProps: { disablePortal: true },
                    }, children: (props.validValues || []).map((v, index) => ((0, jsx_runtime_1.jsx)(core_1.MenuItem, { value: v, children: v }, index))) }, idx))) })) : ((0, jsx_runtime_1.jsx)(core_1.TextField, { variant: "outlined", value: (values || []).join("\n"), onChange: onChange, onBlur: onBlur, multiline: true, minRows: 5, fullWidth: true, InputProps: {
                    classes: { root: "TextList-TextBox" },
                }, "data-testid": "TextList-TextBox", placeholder: `${props.propertyName}...` })), props.hint && (0, jsx_runtime_1.jsx)("span", { className: "TextList-hint", children: props.hint }), props.bottomHeader && ((0, jsx_runtime_1.jsxs)("div", { className: "TextList-header", children: [props.label && (0, jsx_runtime_1.jsx)(core_1.InputLabel, { classes: { root: "TextList-Label" }, children: props.label }), props.validValues && props.validValues.length > 0 && ((0, jsx_runtime_1.jsx)(CommonStyles_1.StyledIconButton, { color: "primary", onClick: add, children: (0, jsx_runtime_1.jsx)(PlusWhiteIcon_1.PlusWhiteIcon, {}) }))] }))] }));
};
exports.PropertyEditorTextList = PropertyEditorTextList;
//# sourceMappingURL=PropertyEditorTextList.js.map