"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineSequenceName = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../../helpers/colors");
const TimelineSelection_1 = require("./TimelineSelection");
const MAX_DISPLAY_NAME_LENGTH = 1000;
const MAX_RENAME_INPUT_WIDTH = 240;
const RENAME_INPUT_CLASS_NAME = 'remotion-timeline-sequence-name-input';
const getTruncatedDisplayName = (displayName) => {
    if (displayName.length > MAX_DISPLAY_NAME_LENGTH) {
        return displayName.slice(0, MAX_DISPLAY_NAME_LENGTH) + '...';
    }
    return displayName;
};
const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
    const inputRef = (0, react_1.useRef)(null);
    const [draftName, setDraftName] = (0, react_1.useState)(displayName);
    const cancelNextBlurRef = (0, react_1.useRef)(false);
    const style = (0, react_1.useMemo)(() => {
        return {
            alignItems: 'center',
            alignSelf: 'stretch',
            ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
            display: 'inline-flex',
            fontSize: 12,
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            color: (0, TimelineSelection_1.getTimelineColor)(selected, false),
            userSelect: 'none',
            WebkitUserSelect: 'none',
            textDecoration: 'none',
            boxShadow: containsSelection && !selected
                ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
                : undefined,
        };
    }, [selected, containsSelection]);
    const inputStyle = (0, react_1.useMemo)(() => {
        return {
            ...style,
            background: colors_1.TRANSPARENT,
            border: 0,
            color: (0, TimelineSelection_1.getTimelineColor)(false, false),
            fontFamily: 'inherit',
            fontSize: 12,
            outline: 'none',
            paddingBottom: 0,
            paddingTop: 0,
            boxSizing: 'border-box',
            maxWidth: MAX_RENAME_INPUT_WIDTH,
            minWidth: 0,
            userSelect: 'text',
            WebkitUserSelect: 'text',
        };
    }, [style]);
    const editableDisplayName = displayName || fallbackDisplayName;
    const text = getTruncatedDisplayName(editableDisplayName);
    (0, react_1.useEffect)(() => {
        if (!editing) {
            setDraftName(editableDisplayName);
            return;
        }
        const input = inputRef.current;
        if (!input) {
            return;
        }
        input.focus();
        input.select();
    }, [editableDisplayName, editing]);
    const save = (0, react_1.useCallback)(() => {
        onSaveName(draftName).catch(() => undefined);
    }, [draftName, onSaveName]);
    const onKeyDown = (0, react_1.useCallback)((e) => {
        if (e.key === 'Escape') {
            cancelNextBlurRef.current = true;
            e.preventDefault();
            onCancelEditing();
            return;
        }
        if (e.key === 'Enter') {
            cancelNextBlurRef.current = true;
            e.preventDefault();
            save();
        }
    }, [onCancelEditing, save]);
    const onBlur = (0, react_1.useCallback)(() => {
        if (cancelNextBlurRef.current) {
            cancelNextBlurRef.current = false;
            return;
        }
        save();
    }, [save]);
    if (editing) {
        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                jsx_runtime_1.jsx("style", { children: `.${RENAME_INPUT_CLASS_NAME}::selection { background: ${colors_1.WHITE_ALPHA_72}; color: ${colors_1.BLACK}; }` }), jsx_runtime_1.jsx("input", { ref: inputRef, className: RENAME_INPUT_CLASS_NAME, value: draftName, onChange: (e) => setDraftName(e.target.value), onBlur: onBlur, onKeyDown: onKeyDown, size: Math.max(1, draftName.length), style: inputStyle })
            ] }));
    }
    return (jsx_runtime_1.jsx("div", { title: text, style: style, children: text }));
};
exports.TimelineSequenceName = TimelineSequenceName;
