import { jsx as _jsx } from "react/jsx-runtime";
import React, { useState, useCallback, useMemo, useEffect } from "react";
import { Input, TextareaAutosize, ClickAwayListener } from "@material-ui/core";
import styled from "styled-components";
import { Typography } from "@material-ui/core";
export const InheritLabel = styled(Typography) `
    && {
        border-bottom: 1px solid transparent;
        word-break: break-word;
        white-space: pre-wrap;
        padding: 6px 12px;

        font-family: Inter;
        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);
        }
    }
`;
export const EditInput = styled(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-family: Inter;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0px;
            text-align: left;
        }
    }
`;
export const EditTextArea = styled(TextareaAutosize) `
    && {
        font-size: inherit;
        border: 1px solid #93a9bf;
        box-sizing: border-box;
        border-radius: 4px;
        height: auto;
        width: 100%;
        font-family: Mulish;
        font-style: normal;
        font-weight: 300;
        color: #677c95;
        padding: 6px 12px;
    }
`;
export const InlineTextEdit = React.forwardRef(({ text, onEdit, placeholder, variant, fullWidth, width, multiLine, readOnly, }, refObject) => {
    const [editing, setEditing] = useState(false);
    const [editValue, setEditValue] = useState(text || "");
    let clickAway = useCallback(() => {
        let newValue = editValue.replace(/\n/g, "");
        !newValue ? setEditValue(newValue) : onEdit(editValue);
        setEditing(false);
    }, [editValue, onEdit]);
    useEffect(() => {
        if (text)
            setEditValue(text);
        else
            setEditValue("");
    }, [text]);
    const renderInput = useMemo(() => {
        return (_jsx(Typography, Object.assign({ variant: variant, component: "div" }, { children: multiLine ? (_jsx(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" }, void 0)) : (_jsx(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 } }, void 0)) }), void 0));
    }, [clickAway, editValue, fullWidth, multiLine, placeholder, variant, width]);
    const renderLabel = () => {
        return (_jsx(InheritLabel, Object.assign({ className: "InlineEdit InlineEdit-label", variant: variant, "data-testid": "InlineTextEditLabel", onClick: !readOnly
                ? (event) => {
                    event.stopPropagation();
                    setEditing(true);
                }
                : undefined, ref: refObject }, { children: editValue || placeholder }), void 0));
    };
    return editing && !readOnly ? (_jsx(ClickAwayListener, Object.assign({ onClickAway: clickAway }, { children: renderInput }), void 0)) : (renderLabel());
});
//# sourceMappingURL=InlineTextEdit.js.map