"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineRowChrome = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../../helpers/colors");
const Padder_1 = require("./Padder");
const timeline_row_layout_1 = require("./timeline-row-layout");
const TimelineSelection_1 = require("./TimelineSelection");
const rowBase = {
    alignItems: 'stretch',
    display: 'flex',
};
const leftChromeStyle = {
    alignItems: 'center',
    alignSelf: 'stretch',
    display: 'flex',
    flexShrink: 0,
};
const keyframeControlsColumnBaseStyle = {
    alignItems: 'center',
    boxSizing: 'border-box',
    display: 'flex',
    flexShrink: 0,
    justifyContent: 'flex-start',
    paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
};
const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
    const ref = (0, react_1.useRef)(null);
    const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
    (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
    const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
        ...keyframeControlsColumnBaseStyle,
        width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth),
    }), [depth]);
    const chromeColumnStyle = (0, react_1.useMemo)(() => ({
        alignItems: 'center',
        alignSelf: 'stretch',
        display: 'flex',
        flexShrink: 0,
        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
    }), []);
    const onPointerDown = (0, react_1.useCallback)((e) => {
        if (e.button === 0) {
            e.stopPropagation();
            onSelect({
                shiftKey: e.shiftKey,
                toggleKey: e.metaKey || e.ctrlKey,
            });
        }
    }, [onSelect]);
    const onContextMenu = (0, react_1.useCallback)((e) => {
        e.stopPropagation();
        onSelect();
    }, [onSelect]);
    const highlightBackground = (0, TimelineSelection_1.getTimelineRowHighlightBackground)({
        showSelectedBackground,
        selected,
        containsSelection,
    });
    const innerRowStyle = (0, react_1.useMemo)(() => ({
        ...rowBase,
        ...style,
        backgroundColor: outerHeight === null ? highlightBackground : undefined,
    }), [style, outerHeight, highlightBackground]);
    const outerStyle = (0, react_1.useMemo)(() => {
        if (outerHeight === null) {
            return undefined;
        }
        return {
            height: outerHeight,
            borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            backgroundColor: highlightBackground,
        };
    }, [outerHeight, highlightBackground]);
    const chrome = (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
            jsx_runtime_1.jsx("div", { style: leftChromeStyle, children: keyframeControls ? (jsx_runtime_1.jsx("div", { style: keyframeControlsColumnStyle, children: keyframeControls })) : (jsx_runtime_1.jsxs("div", { style: chromeColumnStyle, children: [eye, indentWidth > 0 ? jsx_runtime_1.jsx(Padder_1.Padder, { depth: depth }) : null, arrow] })) }), children] }));
    if (outerStyle) {
        return (jsx_runtime_1.jsx("div", { ref: ref, style: outerStyle, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, children: jsx_runtime_1.jsx("div", { style: innerRowStyle, children: chrome }) }));
    }
    return (jsx_runtime_1.jsx("div", { ref: ref, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onPointerDown: selectable ? onPointerDown : undefined, onContextMenu: selectable ? onContextMenu : undefined, onDoubleClick: onDoubleClick, style: innerRowStyle, children: chrome }));
};
exports.TimelineRowChrome = TimelineRowChrome;
