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

    .TextList-TextBox {
        position: relative;

        border: solid 1px rgb(63, 81, 181);

        border-radius: 4px;
        font-family: Mulish;
        padding: 6px 12px;

        transition: all 0.3s;

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

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

    .TextList-Label {
        color: rgb(63, 81, 181);
        font-family: Mulish;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 5px;
    }

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

    .TextList-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
`;
export const PropertyEditorTextList = (props) => {
    const [values, setValues] = 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 (_jsxs(StyledTextList, Object.assign({ "data-testid": `property-${props.propertyName}-text-list`, className: "PropertyList-Wrapper TextList-Wrapper", label: props.label }, { children: [!props.bottomHeader && (_jsxs("div", Object.assign({ className: "TextList-header" }, { children: [props.label && _jsx(InputLabel, Object.assign({ classes: { root: "TextList-Label" } }, { children: props.label }), void 0),
                    props.validValues && props.validValues.length > 0 && (_jsx(StyledIconButton, Object.assign({ color: "primary", onClick: add }, { children: _jsx(PlusWhiteIcon, {}, void 0) }), void 0))] }), void 0)),
            props.validValues && props.validValues.length > 0 ? (_jsx("div", Object.assign({ className: "TextList-SelectBox" }, { children: (values || []).map((val, idx) => (_jsx(TextField, Object.assign({ value: val, onChange: (event) => {
                        onSelect(event.target.value, idx);
                    }, select: true, SelectProps: {
                        MenuProps: { disablePortal: true },
                    } }, { children: (props.validValues || []).map((v, index) => (_jsx(MenuItem, Object.assign({ value: v }, { children: v }), index))) }), idx))) }), void 0)) : (_jsx(TextField, { variant: "outlined", value: (values || []).join("\n"), onChange: onChange, onBlur: onBlur, multiline: true, minRows: 5, InputProps: {
                    classes: { root: "TextList-TextBox" },
                }, "data-testid": "TextList-TextBox", placeholder: "Items..." }, void 0)),
            props.hint && _jsx("span", Object.assign({ className: "TextList-hint" }, { children: props.hint }), void 0),
            props.bottomHeader && (_jsxs("div", Object.assign({ className: "TextList-header" }, { children: [props.label && _jsx(InputLabel, Object.assign({ classes: { root: "TextList-Label" } }, { children: props.label }), void 0),
                    props.validValues && props.validValues.length > 0 && (_jsx(StyledIconButton, Object.assign({ color: "primary", onClick: add }, { children: _jsx(PlusWhiteIcon, {}, void 0) }), void 0))] }), void 0))] }), void 0));
};
//# sourceMappingURL=PropertyEditorTextList.js.map