import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
import React, { useMemo, useEffect } from 'react';
import TranslationProvider from '../../translationProvider/index.js';
import Stack from '../../stack/index.js';
import { Box } from '@chakra-ui/react';
import NavigationTenantMenu from './navigationTenantMenu/index.js';
import { NavigationLanguageMenu } from './NavigationLanguageMenu.js';
import { NavigationItems } from './NavigationItems.js';
import { NavigationAvatar } from './NavigationAvatar.js';
import MobileHeaderMenuToggle from './MobileMenuToggle.js';
import { useNavigationDrawer } from './hooks/useNavigationDrawer.js';
import FavoritesItem from './FavoritesItem.js';
import { NavigationDrawer } from './drawer/index.js';
import { iconItems } from './config/iconItems.js';
import { HeaderNavigationConfig } from './config/HeaderNavigationConfig.js';
import { headerLinks } from './config/headerLinks.js';
import { drawerNodeItems } from './config/DrawerNodeItems.js';
import ComparisonItem from './ComparisonItem.js';

var Navigation = function (_a) {
    var _b, _c;
    var brand = _a.brand, comparisonItemIds = _a.comparisonItemIds, environment = _a.environment, hasNotification = _a.hasNotification, language = _a.language, onLogin = _a.onLogin, onLogout = _a.onLogout, trackEvent = _a.trackEvent, _d = _a.useAbsoluteUrls, useAbsoluteUrls = _d === void 0 ? false : _d, project = _a.project, user = _a.user, selectTenant = _a.selectTenant, _e = _a.showTenantSelection, showTenantSelection = _e === void 0 ? true : _e;
    var config = useMemo(function () {
        var urlPathParams = (user === null || user === void 0 ? void 0 : user.sellerId)
            ? { accountId: user === null || user === void 0 ? void 0 : user.sellerId }
            : undefined;
        var headerNavigationConfigInstance = new HeaderNavigationConfig({
            brand: brand,
            environment: environment,
            useAbsoluteUrls: useAbsoluteUrls,
            project: project,
            config: {
                headerItems: headerLinks({ trackEvent: trackEvent }),
                drawerItems: drawerNodeItems({
                    trackEvent: trackEvent,
                    onLogout: onLogout,
                    comparisonItemIds: comparisonItemIds,
                    sellerId: user === null || user === void 0 ? void 0 : user.sellerId,
                    currentLanguage: language,
                    isLoggedIn: !!user,
                }),
                iconItems: iconItems({
                    trackEvent: trackEvent,
                    comparisonItemIds: comparisonItemIds,
                }),
            },
            user: user,
            urlPathParams: urlPathParams,
        });
        return headerNavigationConfigInstance.getMappedConfig();
    }, [
        user,
        brand,
        environment,
        useAbsoluteUrls,
        project,
        trackEvent,
        onLogout,
        comparisonItemIds,
        language,
    ]);
    var _f = useNavigationDrawer({
        drawerNodeItems: config.drawerItems,
    }), drawer = _f.drawer, isOpen = _f.isOpen, onClose = _f.onClose, createDrawerHandler = _f.createDrawerHandler;
    // We can't pass `onClose` to logout callback when instancing the config
    // because config is needed to call `useNavigationDrawer` hook
    // which returns `onClose` callback
    // that's why we need to call onClose like this
    useEffect(function () {
        if (!(user === null || user === void 0 ? void 0 : user.userId)) {
            onClose();
        }
    }, [user === null || user === void 0 ? void 0 : user.userId, onClose]);
    return (React.createElement(TranslationProvider, { language: language, scopes: ['header', 'auth.tenantSelection'] },
        React.createElement(Box, __assign({ width: "full", borderBottomColor: "gray.200", borderBottomWidth: "1px", zIndex: "header", backgroundColor: "white" }, (isOpen ? { position: 'fixed', top: 0 } : { position: 'relative' })),
            React.createElement(Box, { maxWidth: "container.2xl", height: config.menuHeight, alignItems: "center", margin: "auto", display: "flex", justifyContent: "space-between", px: { base: 'sm', xs: 'lg', sm: '2xl' } },
                React.createElement(NavigationItems, { platform: brand, headerLinks: config.headerItems, drawer: drawer, isOpen: isOpen, createDrawerHandler: createDrawerHandler, language: language }),
                React.createElement(Stack, { direction: "row", spacing: "2xl", align: "center" },
                    ((_b = config.iconItems.favorites) === null || _b === void 0 ? void 0 : _b.isVisible) ? (React.createElement(FavoritesItem, { link: config.iconItems.favorites })) : null,
                    config.iconItems.comparison ? (React.createElement(ComparisonItem, { link: config.iconItems.comparison, count: (_c = comparisonItemIds === null || comparisonItemIds === void 0 ? void 0 : comparisonItemIds.length) !== null && _c !== void 0 ? _c : 0 })) : null,
                    React.createElement(NavigationAvatar, { user: user, createDrawerHandler: createDrawerHandler, isOpen: isOpen, drawer: drawer, hasNotification: hasNotification, onLogin: onLogin }),
                    showTenantSelection ? (React.createElement(NavigationTenantMenu, { user: user, selectTenant: selectTenant })) : null,
                    React.createElement(NavigationLanguageMenu, { activeLanguage: language }),
                    React.createElement(MobileHeaderMenuToggle, { isOpen: isOpen, createDrawerHandler: createDrawerHandler })))),
        React.createElement(NavigationDrawer, { user: user, showTenantSelection: showTenantSelection, drawer: drawer, isOpen: isOpen, onClose: onClose, menuHeight: config.menuHeight, onLogin: onLogin, onLogout: onLogout, selectTenant: selectTenant })));
};

export { Navigation as default };
//# sourceMappingURL=index.js.map
