import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { TextField, InputLabel } from "@material-ui/core";
import styled from "styled-components";
const StyledNumberList = styled("div") `
    width: 100%;

    .NumberList-TextBox {
        position: relative;
        border: solid 1px rgb(63, 81, 181);
        border-radius: 4px;
        font-family: Mulish;
        padding: 6px 12px;

        transition: all 0.3s;

        min-height: 100px;

        .MuiInputBase-input {
            font-family: Mulish;
            font-style: normal;
            font-weight: 600;
            padding: 0;
        }

        &:before {
            position: absolute;
            content: "";
            border: solid 2px rgb(63, 81, 181);
            top: -1px;
            left: -1px;
            bottom: -1px;
            right: -1px;
            border-radius: 4px;
        }
    }

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

    .NumberList-hint {
        color: rgba(0, 0, 0, 0.54);
        font-family: Mulish;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 18px;
        margin-top: 5px;
        display: block;
    }
`;
const validNumber = new RegExp(/^\d*\.?\d*$/);
export const PropertyEditorNumberList = (props) => {
    const [values, setValues] = 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 (_jsxs(StyledNumberList, Object.assign({ "data-testid": `property-${props.propertyName}-number-list`, className: "PropertyList-Wrapper NumberList-Wrapper", label: props.label }, { children: [props.label && _jsx(InputLabel, Object.assign({ classes: { root: "NumberList-Label" } }, { children: props.label }), void 0),
            _jsx(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" }, void 0),
            props.hint && _jsx("span", Object.assign({ className: "NumberList-hint" }, { children: props.hint }), void 0)] }), void 0));
};
//# sourceMappingURL=PropertyEditorNumberList.js.map