'use client';
import LinkWithDefault from 'next/link.js';
import React, { useEffect, useRef, useState } from 'react';
import Account from '../../graphics/Account/index.js';
import { useActions } from '../../providers/ActionsProvider/index.js';
import { useConfig } from '../../providers/Config/index.js';
import { useTranslation } from '../../providers/Translation/index.js';
import { Hamburger } from '../Hamburger/index.js';
import { LocalizerLabel } from '../Localizer/LocalizerLabel/index.js';
import Localizer from '../Localizer/index.js';
import { NavToggler } from '../Nav/NavToggler/index.js';
import { useNav } from '../Nav/context.js';
import StepNav from '../StepNav/index.js';
const baseClass = 'app-header';
export const AppHeader = ()=>{
    const { t } = useTranslation();
    const { localization, routes: { admin: adminRoute } } = useConfig();
    const { actions } = useActions();
    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 Link = LinkWithDefault.default;
    const LinkElement = Link || 'a';
    return /*#__PURE__*/ React.createElement("header", {
        className: [
            baseClass,
            navOpen && `${baseClass}--nav-open`
        ].filter(Boolean).join(' ')
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__bg`
    }), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__content`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__wrapper`
    }, /*#__PURE__*/ React.createElement(NavToggler, {
        className: `${baseClass}__mobile-nav-toggler`,
        tabIndex: -1
    }, /*#__PURE__*/ React.createElement(Hamburger, null)), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__controls-wrapper`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__step-nav-wrapper`
    }, /*#__PURE__*/ React.createElement(StepNav, {
        Link: Link,
        className: `${baseClass}__step-nav`
    })), /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__actions-wrapper`
    }, /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__actions`,
        ref: customControlsRef
    }, Array.isArray(actions) && actions.map((Action, i)=>/*#__PURE__*/ React.createElement("div", {
            className: isScrollable && i === actions.length - 1 ? `${baseClass}__last-action` : '',
            key: i
        }, Action))), isScrollable && /*#__PURE__*/ React.createElement("div", {
        className: `${baseClass}__gradient-placeholder`
    })), localization && /*#__PURE__*/ React.createElement(LocalizerLabel, {
        ariaLabel: "invisible",
        className: `${baseClass}__localizer-spacing`
    }), /*#__PURE__*/ React.createElement(LinkElement, {
        "aria-label": t('authentication:account'),
        className: `${baseClass}__account`,
        href: `${adminRoute}/account`,
        tabIndex: 0
    }, /*#__PURE__*/ React.createElement(Account, null))))), /*#__PURE__*/ React.createElement(Localizer, {
        className: `${baseClass}__localizer`
    }));
};

//# sourceMappingURL=index.js.map