"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineFieldLabel = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const colors_1 = require("../../helpers/colors");
const timeline_layout_1 = require("../../helpers/timeline-layout");
const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
const TimelineSelection_1 = require("./TimelineSelection");
const fieldNameBase = {
    fontSize: 12,
    color: colors_1.WHITE_ALPHA_80,
    userSelect: 'none',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    flex: 1,
    minWidth: 0,
};
const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
    const { basePadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
    const labelRowStyle = (0, react_1.useMemo)(() => ({
        ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth, basePadding),
        ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
        ...(stacked ? { flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px` } : null),
        alignSelf: 'stretch',
    }), [basePadding, rowDepth, selected, stacked]);
    const fieldNameStyle = (0, react_1.useMemo)(() => ({
        ...fieldNameBase,
        color: (0, TimelineSelection_1.getTimelineColor)(selected, true),
    }), [selected]);
    return (jsx_runtime_1.jsx("div", { style: labelRowStyle, children: jsx_runtime_1.jsx("span", { style: fieldNameStyle, title: label, children: label }) }));
};
exports.TimelineFieldLabel = TimelineFieldLabel;
