"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Header = Header;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const uikit_1 = require("@gravity-ui/uikit");
const actionUtils_1 = require("../../../utils/actionUtils.js");
const cn_1 = require("../../../utils/cn.js");
const ActionButton_1 = require("../../atoms/ActionButton/index.js");
const ButtonGroup_1 = require("../../molecules/ButtonGroup/index.js");
const i18n_1 = require("./i18n/index.js");
const types_1 = require("./types.js");
const useHeader_1 = require("./useHeader.js");
require("./Header.css");
const b = (0, cn_1.block)('header');
// Icons for base actions
const ACTION_ICONS = {
    [types_1.HeaderAction.NewChat]: icons_1.Plus,
    [types_1.HeaderAction.History]: icons_1.ClockArrowRotateLeft,
    [types_1.HeaderAction.Folding]: icons_1.ChevronsCollapseUpRight, // Default icon, will be switched based on state
    [types_1.HeaderAction.Close]: icons_1.Xmark,
};
// Icons for folding states
const FOLDING_ICONS = {
    collapsed: icons_1.ChevronsExpandUpRight,
    opened: icons_1.ChevronsCollapseUpRight,
};
/**
 * Header component for displaying chat header with navigation and actions
 *
 * @param props - Component props
 * @returns Header component
 */
function Header(props) {
    const { title, preview, icon, baseActions, additionalActions, titlePosition, withIcon, showTitle = true, className, historyButtonRef, qa, actionQa, actionTooltipTexts, } = (0, useHeader_1.useHeader)(props);
    // Determine class for title positioning
    const titlePositionClass = b('title-container', { position: titlePosition });
    const iconElement = icon ? ((0, jsx_runtime_1.jsx)("div", { className: b('icon'), children: icon })) : ((0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Sparkles, size: 16 }));
    // Render base action
    const renderBaseAction = (0, react_1.useCallback)((action, ref) => {
        var _a, _b;
        let IconComponent = ACTION_ICONS[action.id];
        // Handle folding icon based on state
        if (action.id === types_1.HeaderAction.Folding && action.foldingState) {
            IconComponent = FOLDING_ICONS[action.foldingState];
        }
        if (!IconComponent) {
            return null;
        }
        // Get tooltip text
        let tooltipKey = `action-tooltip-${action.id}`;
        let tooltipOverride;
        if (action.id === types_1.HeaderAction.Folding && action.foldingState) {
            tooltipKey = `action-tooltip-folding-${action.foldingState}`;
            tooltipOverride = (_a = actionTooltipTexts === null || actionTooltipTexts === void 0 ? void 0 : actionTooltipTexts[types_1.HeaderAction.Folding]) === null || _a === void 0 ? void 0 : _a[action.foldingState];
        }
        else {
            tooltipOverride =
                actionTooltipTexts === null || actionTooltipTexts === void 0 ? void 0 : actionTooltipTexts[action.id];
        }
        // Determine ref for history button
        const buttonRef = action.id === types_1.HeaderAction.History ? ref : undefined;
        return ((0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, { ref: buttonRef, tooltipTitle: tooltipOverride !== null && tooltipOverride !== void 0 ? tooltipOverride : (0, i18n_1.i18n)(tooltipKey), size: "m", view: "flat", onClick: action.onClick, className: b('action-button'), qa: (_b = actionQa === null || actionQa === void 0 ? void 0 : actionQa[action.id]) !== null && _b !== void 0 ? _b : `header-action-${action.id}`, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: IconComponent, size: 16 }) }, action.id));
    }, [actionQa, actionTooltipTexts]);
    // Render additional action
    const renderAdditionalAction = (0, react_1.useCallback)((action, index) => {
        const id = `additional-${index}`;
        if (!(0, actionUtils_1.isActionConfig)(action)) {
            return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: action }, id);
        }
        return ((0, jsx_runtime_1.jsx)(ActionButton_1.ActionButton, Object.assign({}, action, { view: action.view || 'flat', size: "m", children: action.icon || action.label }), `${index}`));
    }, []);
    return ((0, jsx_runtime_1.jsxs)("div", { className: b('', className), "data-qa": qa, children: [withIcon && iconElement, showTitle && ((0, jsx_runtime_1.jsxs)("div", { className: titlePositionClass, children: [title && ((0, jsx_runtime_1.jsx)(uikit_1.Text, { title: title, as: "div", variant: "subheader-2", className: b('title'), children: title })), preview && (0, jsx_runtime_1.jsx)("div", { className: b('preview'), children: preview })] })), (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [additionalActions.map((action, index) => renderAdditionalAction(action, index)), baseActions.map((action) => renderBaseAction(action, historyButtonRef))] })] }));
}
//# sourceMappingURL=Header.js.map
