"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InlineEditableTitle = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../helpers/colors");
const titleWrapper = {
    boxSizing: 'border-box',
    color: colors_1.WHITE,
    fontSize: 12,
    height: 18,
    lineHeight: '18px',
    marginLeft: -4,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    width: 'calc(100% + 4px)',
};
const titleInner = {
    borderRadius: 4,
    boxSizing: 'border-box',
    display: 'inline-grid',
    fontSize: 12,
    lineHeight: '18px',
    maxWidth: '100%',
    paddingLeft: 4,
    paddingRight: 4,
    verticalAlign: 'top',
};
const titleGridItem = {
    fontSize: 12,
    gridArea: '1 / 1',
    minWidth: 0,
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
};
const titleInput = {
    appearance: 'none',
    backgroundColor: colors_1.TRANSPARENT,
    border: 'none',
    boxShadow: 'none',
    color: colors_1.WHITE,
    fontFamily: 'inherit',
    fontSize: 12,
    height: 18,
    lineHeight: '18px',
    margin: 0,
    minWidth: 0,
    outline: 'none',
    overflow: 'hidden',
    padding: 0,
    WebkitAppearance: 'none',
    width: '100%',
};
const InlineEditableTitle = ({ value, canRename, getInitialSelection, onClick, onCommit, title }) => {
    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
    const [draftValue, setDraftValue] = (0, react_1.useState)(value);
    const inputRef = (0, react_1.useRef)(null);
    const cancelledRef = (0, react_1.useRef)(false);
    (0, react_1.useEffect)(() => {
        if (!isEditing) {
            setDraftValue(value);
        }
    }, [isEditing, value]);
    const focusInput = (0, react_1.useCallback)((input) => {
        inputRef.current = input;
        if (!input) {
            return;
        }
        input.focus();
        if (getInitialSelection) {
            const [start, end] = getInitialSelection(value);
            input.setSelectionRange(start, end);
            return;
        }
        input.select();
    }, [getInitialSelection, value]);
    const commit = (0, react_1.useCallback)((newValue) => {
        if (cancelledRef.current) {
            return;
        }
        setIsEditing(false);
        onCommit(newValue);
    }, [onCommit]);
    const handleClick = (0, react_1.useCallback)(() => {
        if (onClick) {
            onClick();
            return;
        }
        if (!canRename) {
            return;
        }
        cancelledRef.current = false;
        setDraftValue(value);
        setIsEditing(true);
    }, [canRename, onClick, value]);
    const onChange = (0, react_1.useCallback)((e) => {
        setDraftValue(e.target.value);
    }, []);
    const onBlur = (0, react_1.useCallback)((e) => {
        commit(e.currentTarget.value);
    }, [commit]);
    const onKeyDown = (0, react_1.useCallback)((e) => {
        var _a;
        if (e.key === 'Enter') {
            e.preventDefault();
            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
        }
        if (e.key === 'Escape') {
            e.preventDefault();
            cancelledRef.current = true;
            setDraftValue(value);
            setIsEditing(false);
        }
    }, [value]);
    const isInteractive = canRename || onClick !== undefined;
    const backgroundColor = isEditing
        ? colors_1.INPUT_BACKGROUND
        : isHovered && isInteractive
            ? colors_1.WHITE_ALPHA_06
            : colors_1.TRANSPARENT;
    const innerStyle = (0, react_1.useMemo)(() => {
        return {
            ...titleInner,
            backgroundColor,
            cursor: isEditing ? 'text' : isInteractive ? 'pointer' : 'default',
            userSelect: isEditing ? 'text' : 'none',
            width: isEditing ? '100%' : undefined,
        };
    }, [backgroundColor, isEditing, isInteractive]);
    return (jsx_runtime_1.jsx("div", { style: titleWrapper, title: title !== null && title !== void 0 ? title : value, children: jsx_runtime_1.jsxs("span", { style: innerStyle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: isEditing || !isInteractive ? undefined : handleClick, children: [
                jsx_runtime_1.jsx("span", { "aria-hidden": isEditing, style: {
                        ...titleGridItem,
                        visibility: isEditing ? 'hidden' : 'visible',
                    }, children: value }), isEditing ? (jsx_runtime_1.jsx("input", { ref: focusInput, style: { ...titleGridItem, ...titleInput }, value: draftValue, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown })) : null] }) }));
};
exports.InlineEditableTitle = InlineEditableTitle;
