'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import { formatAdminURL } from 'payload/shared';
import React, { useEffect, useRef, useState } from 'react';
import { Account } from '../../graphics/Account/index.js';
import { useActions } from '../../providers/Actions/index.js';
import { useConfig } from '../../providers/Config/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { Hamburger } from '../Hamburger/index.js';
import { Link } from '../Link/index.js';
import { Localizer } from '../Localizer/index.js';
import { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js';
import { useNav } from '../Nav/context.js';
import { NavToggler } from '../Nav/NavToggler/index.js';
import { RenderCustomComponent } from '../RenderCustomComponent/index.js';
import { StepNav } from '../StepNav/index.js';
import './index.scss';
const baseClass = 'app-header';
export function AppHeader({ CustomAvatar, CustomIcon }) {
    const { t } = useTranslation();
    const { Actions } = useActions();
    const { config: { admin: { routes: { account: accountRoute } }, localization, routes: { admin: adminRoute }, serverURL } } = useConfig();
    const { navOpen } = useNav();
    const customControlsRef = useRef(null);
    const [isScrollable, setIsScrollable] = useState(false);
    useEffect(()=>{
        const checkIsScrollable = ()=>{
            const el = customControlsRef.current;
            if (el) {
                const scrollable = el.scrollWidth > el.clientWidth;
                setIsScrollable(scrollable);
            }
        };
        checkIsScrollable();
        window.addEventListener('resize', checkIsScrollable);
        return ()=>{
            window.removeEventListener('resize', checkIsScrollable);
        };
    }, [
        Actions
    ]);
    const ActionComponents = Actions ? Object.values(Actions) : [];
    return /*#__PURE__*/ _jsxDEV("header", {
        className: [
            baseClass,
            navOpen && `${baseClass}--nav-open`
        ].filter(Boolean).join(' '),
        children: [
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__bg`
            }, void 0, false, {
                fileName: "src/elements/AppHeader/index.tsx",
                lineNumber: 67,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV("div", {
                className: `${baseClass}__content`,
                children: /*#__PURE__*/ _jsxDEV("div", {
                    className: `${baseClass}__wrapper`,
                    children: [
                        /*#__PURE__*/ _jsxDEV(NavToggler, {
                            className: `${baseClass}__mobile-nav-toggler`,
                            tabIndex: -1,
                            children: /*#__PURE__*/ _jsxDEV(Hamburger, {}, void 0, false, {
                                fileName: "src/elements/AppHeader/index.tsx",
                                lineNumber: 71,
                                columnNumber: 13
                            }, this)
                        }, void 0, false, {
                            fileName: "src/elements/AppHeader/index.tsx",
                            lineNumber: 70,
                            columnNumber: 11
                        }, this),
                        /*#__PURE__*/ _jsxDEV("div", {
                            className: `${baseClass}__controls-wrapper`,
                            children: [
                                /*#__PURE__*/ _jsxDEV("div", {
                                    className: `${baseClass}__step-nav-wrapper`,
                                    children: /*#__PURE__*/ _jsxDEV(StepNav, {
                                        className: `${baseClass}__step-nav`,
                                        CustomIcon: CustomIcon
                                    }, void 0, false, {
                                        fileName: "src/elements/AppHeader/index.tsx",
                                        lineNumber: 75,
                                        columnNumber: 15
                                    }, this)
                                }, void 0, false, {
                                    fileName: "src/elements/AppHeader/index.tsx",
                                    lineNumber: 74,
                                    columnNumber: 13
                                }, this),
                                /*#__PURE__*/ _jsxDEV("div", {
                                    className: `${baseClass}__actions-wrapper`,
                                    children: [
                                        /*#__PURE__*/ _jsxDEV("div", {
                                            className: `${baseClass}__actions`,
                                            ref: customControlsRef,
                                            children: ActionComponents.map((Action, i)=>/*#__PURE__*/ _jsxDEV("div", {
                                                    className: isScrollable && i === ActionComponents.length - 1 ? `${baseClass}__last-action` : '',
                                                    children: Action
                                                }, i, false, {
                                                    fileName: "src/elements/AppHeader/index.tsx",
                                                    lineNumber: 80,
                                                    columnNumber: 19
                                                }, this))
                                        }, void 0, false, {
                                            fileName: "src/elements/AppHeader/index.tsx",
                                            lineNumber: 78,
                                            columnNumber: 15
                                        }, this),
                                        isScrollable && /*#__PURE__*/ _jsxDEV("div", {
                                            className: `${baseClass}__gradient-placeholder`
                                        }, void 0, false, {
                                            fileName: "src/elements/AppHeader/index.tsx",
                                            lineNumber: 92,
                                            columnNumber: 32
                                        }, this)
                                    ]
                                }, void 0, true, {
                                    fileName: "src/elements/AppHeader/index.tsx",
                                    lineNumber: 77,
                                    columnNumber: 13
                                }, this),
                                localization && /*#__PURE__*/ _jsxDEV(LocalizerLabel, {
                                    ariaLabel: "invisible",
                                    className: `${baseClass}__localizer-spacing`
                                }, void 0, false, {
                                    fileName: "src/elements/AppHeader/index.tsx",
                                    lineNumber: 95,
                                    columnNumber: 15
                                }, this),
                                /*#__PURE__*/ _jsxDEV(Link, {
                                    "aria-label": t('authentication:account'),
                                    className: `${baseClass}__account`,
                                    href: formatAdminURL({
                                        adminRoute,
                                        path: accountRoute
                                    }),
                                    prefetch: false,
                                    tabIndex: 0,
                                    children: /*#__PURE__*/ _jsxDEV(RenderCustomComponent, {
                                        CustomComponent: CustomAvatar,
                                        Fallback: /*#__PURE__*/ _jsxDEV(Account, {}, void 0, false, {
                                            fileName: "src/elements/AppHeader/index.tsx",
                                            lineNumber: 104,
                                            columnNumber: 79
                                        }, void 0)
                                    }, void 0, false, {
                                        fileName: "src/elements/AppHeader/index.tsx",
                                        lineNumber: 104,
                                        columnNumber: 15
                                    }, this)
                                }, void 0, false, {
                                    fileName: "src/elements/AppHeader/index.tsx",
                                    lineNumber: 97,
                                    columnNumber: 13
                                }, this)
                            ]
                        }, void 0, true, {
                            fileName: "src/elements/AppHeader/index.tsx",
                            lineNumber: 73,
                            columnNumber: 11
                        }, this)
                    ]
                }, void 0, true, {
                    fileName: "src/elements/AppHeader/index.tsx",
                    lineNumber: 69,
                    columnNumber: 9
                }, this)
            }, void 0, false, {
                fileName: "src/elements/AppHeader/index.tsx",
                lineNumber: 68,
                columnNumber: 7
            }, this),
            /*#__PURE__*/ _jsxDEV(Localizer, {
                className: `${baseClass}__localizer`
            }, void 0, false, {
                fileName: "src/elements/AppHeader/index.tsx",
                lineNumber: 109,
                columnNumber: 7
            }, this)
        ]
    }, void 0, true, {
        fileName: "src/elements/AppHeader/index.tsx",
        lineNumber: 66,
        columnNumber: 5
    }, this);
}

//# sourceMappingURL=index.js.map