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