/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-2305ece
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, Fragment, } from 'react';
import { SlashIcon } from '../../../icons/SlashIcon.js';
import { tasty } from '../../../tasty/index.js';
import { Link } from '../../actions/Link/Link.js';
import { useAutoTooltip } from '../use-auto-tooltip.js';
import { LayoutContent } from './LayoutContent.js';
const HeaderElement = tasty(LayoutContent, {
    as: 'header',
    qa: 'LayoutHeader',
    styles: {
        container: 'none',
        // Header always has bottom border (inherent style)
        border: 'bottom',
        flexShrink: 0,
        flexGrow: 0,
        Inner: {
            $: '>',
            display: 'grid',
            gridTemplate: `
        "breadcrumbs breadcrumbs breadcrumbs" auto
        "title suffix extra" 1fr
        "subtitle subtitle extra" auto
        / max-content 1fr minmax(0, auto)
      `,
            gap: 0,
            placeContent: 'stretch',
            placeItems: 'center stretch',
        },
        Breadcrumbs: {
            $: '> Inner >',
            gridArea: 'breadcrumbs',
            display: 'flex',
            flow: 'row nowrap',
            placeItems: 'center start',
            gap: '1bw',
            preset: 't3 strong',
            color: '#dark-02',
        },
        Title: {
            $: '> Inner >',
            gridArea: 'title',
            preset: {
                '': 'h3',
                'level=1': 'h1',
                'level=2': 'h2',
                'level=3': 'h3',
                'level=4': 'h4',
                'level=5': 'h5',
                'level=6': 'h6',
            },
            color: '#dark',
            margin: 0,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
        },
        Suffix: {
            $: '> Inner >',
            gridArea: 'suffix',
            display: 'flex',
            placeItems: 'center',
        },
        Extra: {
            $: '> Inner >',
            gridArea: 'extra',
            display: 'flex',
            placeItems: 'center',
            placeSelf: 'end',
            gap: '1x',
            width: 'max 100%',
        },
        Subtitle: {
            $: '> Inner >',
            gridArea: 'subtitle',
            preset: 't3',
            color: '#dark-02',
        },
    },
});
function LayoutHeader(props, ref) {
    const { title, level = 3, suffix, extra, subtitle, breadcrumbs, scrollbar = 'tiny', children, mods, ...otherProps } = props;
    // Use auto tooltip for title overflow detection
    const { labelRef, renderWithTooltip } = useAutoTooltip({
        tooltip: true,
        children: typeof title === 'string' ? title : undefined,
    });
    const hasBreadcrumbs = breadcrumbs && breadcrumbs.length > 0;
    const renderBreadcrumbs = () => {
        if (!hasBreadcrumbs)
            return null;
        return (_jsx("div", { "data-element": "Breadcrumbs", children: breadcrumbs.map(([label, href], index) => (_jsxs(Fragment, { children: [_jsx(Link, { to: href, children: label }), _jsx(SlashIcon, {})] }, href))) }));
    };
    const renderTitle = (tooltipProps, tooltipRef) => {
        if (!title)
            return null;
        const TitleTag = `h${level}`;
        return (_jsx(TitleTag, { ref: tooltipRef, "data-element": "Title", "data-level": level, ...tooltipProps, children: _jsx("span", { ref: labelRef, children: title }) }));
    };
    return (_jsxs(HeaderElement, { ...otherProps, ref: ref, mods: { ...mods, level }, scrollbar: scrollbar, children: [renderBreadcrumbs(), renderWithTooltip(renderTitle, 'bottom'), suffix && _jsx("div", { "data-element": "Suffix", children: suffix }), extra && _jsx("div", { "data-element": "Extra", children: extra }), subtitle && _jsx("div", { "data-element": "Subtitle", children: subtitle }), children] }));
}
const _LayoutHeader = forwardRef(LayoutHeader);
_LayoutHeader.displayName = 'Layout.Header';
export { _LayoutHeader as LayoutHeader };

        