import React, { useState, useRef, useEffect } from "react";
/**
 * A simple React component for a user to set a custom title for a tab.
 */
export const TitleEdit = ({ title, cancelEditing, saveTitle, }) => {
    const [newTitle, setNewTitle] = useState(title);
    const ref = useRef(null);
    // Sets the cursor focus in the input box
    useEffect(() => {
        var _a;
        (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus();
    }, []);
    const onBlur = () => {
        cancelEditing();
    };
    const onKeyDown = (e) => {
        var _a;
        if (e.key === "Escape")
            cancelEditing();
        if (e.key === "Enter") {
            // When the user erases the entire input then the title should revert back to its default
            const replacementTitle = (newTitle === null || newTitle === void 0 ? void 0 : newTitle.trim()) === "" ? null : newTitle;
            saveTitle((_a = replacementTitle === null || replacementTitle === void 0 ? void 0 : replacementTitle.trim()) !== null && _a !== void 0 ? _a : null);
        }
    };
    const onChange = (e) => {
        setNewTitle(e.target.value);
    };
    return (React.createElement("input", { ref: ref, value: newTitle !== null && newTitle !== void 0 ? newTitle : "", onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown, type: "text", className: "fsbl-tab-input", maxLength: 32 }));
};
//# sourceMappingURL=TitleEdit.js.map