"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InlineTextEdit = exports.EditTextArea = exports.EditInput = exports.InheritLabel = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
exports.InheritLabel = (0, styled_components_1.default)(core_1.Typography) `
    && {
        border-bottom: 1px solid transparent;
        word-break: break-word;
        white-space: pre-wrap;

        font-style: normal;
        font-weight: 400;

        letter-spacing: 0em;
        text-align: left;

        color: rgba(39, 41, 50, 0.5);

        &:hover {
            color: rgba(39, 41, 50);
        }
    }
`;
exports.EditInput = (0, styled_components_1.default)(core_1.Input) `
    && {
        font-size: inherit;

        line-height: inherit;

        .MuiInputBase-input {
            background: rgba(64, 80, 166, 0.05);
            border: none;
            border-bottom: solid 1px rgba(64, 80, 166, 0.35);
            box-sizing: border-box;

            height: auto;
            padding: 6px 12px;
            color: rgba(39, 41, 50, 0.7);

            //styleName: text/Inter Regular 12px;

            font-style: normal;
            font-weight: 400;
            letter-spacing: 0px;
            text-align: left;
        }
    }
`;
exports.EditTextArea = (0, styled_components_1.default)(core_1.TextareaAutosize) `
    && {
        font-size: inherit;
        border: 1px solid #93a9bf;
        box-sizing: border-box;
        border-radius: 4px;
        height: auto;
        width: 100%;

        font-style: normal;
        font-weight: 300;
        color: #677c95;
        padding: 6px 12px;
    }
`;
exports.InlineTextEdit = react_1.default.forwardRef(({ text, onEdit, placeholder, variant, fullWidth, width, multiLine, readOnly, small }, refObject) => {
    const [editing, setEditing] = (0, react_1.useState)(false);
    const [editValue, setEditValue] = (0, react_1.useState)(text || "");
    let clickAway = (0, react_1.useCallback)(() => {
        let newValue = editValue.replace(/\n/g, "");
        !newValue ? setEditValue(newValue) : onEdit(editValue);
        setEditing(false);
    }, [editValue, onEdit]);
    (0, react_1.useEffect)(() => {
        if (text)
            setEditValue(text);
        else
            setEditValue("");
    }, [text]);
    const renderInput = (0, react_1.useMemo)(() => {
        return ((0, jsx_runtime_1.jsx)(core_1.Typography, { variant: variant, component: "div", children: multiLine ? ((0, jsx_runtime_1.jsx)(exports.EditTextArea, { ref: (ref) => ref && ref.focus(), onFocus: (event) => event.currentTarget.setSelectionRange(event.currentTarget.value.length, event.currentTarget.value.length), value: editValue, onChange: (event) => {
                    setEditValue(event.target.value);
                }, onBlur: clickAway, onKeyDown: (event) => {
                    if (event.key === "tab") {
                        clickAway();
                    }
                }, placeholder: placeholder, style: { width: width, overflow: "auto" }, rows: "3", "data-testid": "MultiInlineTextEditInput" })) : ((0, jsx_runtime_1.jsx)(exports.EditInput, { value: editValue, disableUnderline: true, onChange: (event) => {
                    setEditValue(event.target.value);
                }, onBlur: clickAway, onKeyDown: (event) => {
                    if (event.key === "Enter" || event.key === "Escape") {
                        clickAway();
                    }
                }, className: "InlineEdit InlineEdit-input", placeholder: placeholder, autoFocus: true, "data-testid": "InlineTextEditInput", fullWidth: fullWidth, style: { width: width } })) }));
    }, [clickAway, editValue, fullWidth, multiLine, placeholder, variant, width]);
    let padding = "0px";
    if (!small) {
        padding = "6px 12px";
    }
    const renderLabel = () => {
        return ((0, jsx_runtime_1.jsx)(exports.InheritLabel, { className: "InlineEdit InlineEdit-label", variant: variant, "data-testid": "InlineTextEditLabel", style: { padding: padding }, onClick: !readOnly
                ? (event) => {
                    event.stopPropagation();
                    setEditing(true);
                }
                : undefined, ref: refObject, children: editValue || placeholder }));
    };
    return editing && !readOnly ? ((0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: clickAway, children: renderInput })) : (renderLabel());
});
//# sourceMappingURL=InlineTextEdit.js.map