"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyEditorNumberList = 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 StyledNumberList = (0, styled_components_1.default)("div") `
    width: 100%;

    .NumberList-TextBox {
        position: relative;
        border-radius: 4px;

        padding: 0;

        transition: all 0.3s;

        min-height: 100px;

        .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);
        }
    }

    .NumberList-Label {
        font-style: normal;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .NumberList-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;
    }
`;
const validNumber = new RegExp(/^\d*\.?\d*$/);
const PropertyEditorNumberList = (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();
    };
    if (values.length === 0) {
        values.push("");
        update(values);
    }
    const onChange = (event) => {
        let temp = [...event.target.value.split("\n")];
        if (!temp.find((v) => {
            if (v !== "")
                return !validNumber.test(v);
            return false;
        })) {
            setValues([...event.target.value.split("\n")]);
        }
    };
    const onBlur = () => {
        update(values);
    };
    return ((0, jsx_runtime_1.jsxs)(StyledNumberList, { "data-testid": `property-${props.propertyName}-number-list`, className: "PropertyList-Wrapper NumberList-Wrapper", label: props.label, children: [props.label && (0, jsx_runtime_1.jsx)(core_1.InputLabel, { classes: { root: "NumberList-Label" }, children: props.label }), (0, jsx_runtime_1.jsx)(core_1.TextField, { variant: "outlined", value: (values || []).join("\n"), onChange: onChange, onBlur: onBlur, multiline: true, minRows: 5, InputProps: {
                    classes: { root: "NumberList-TextBox" },
                }, placeholder: "Numbers...", "data-testid": "NumberList-TextBox" }), props.hint && (0, jsx_runtime_1.jsx)("span", { className: "NumberList-hint", children: props.hint })] }));
};
exports.PropertyEditorNumberList = PropertyEditorNumberList;
//# sourceMappingURL=PropertyEditorNumberList.js.map