tokenFactory/web/src/components/layout/headerbar/index.jsx

/*
Copyright (C) 2025 QuantumNous

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.

For commercial licensing, please contact support@quantumnous.com
*/

import React, { useCallback, useState } from 'react';
import { useHeaderBar } from '../../../hooks/common/useHeaderBar';
import { useNavigation } from '../../../hooks/common/useNavigation';
import { useUserMessageUnreadCount } from '../../../hooks/common/useUserMessageUnreadCount';
import UserMessageModal from './UserMessageModal';
import MobileMenuButton from './MobileMenuButton';
import HeaderLogo from './HeaderLogo';
import MobileSiteNavDropdown from './MobileSiteNavDropdown';
import Navigation from './Navigation';
import ActionButtons from './ActionButtons';

const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
  const {
    userState,
    isMobile,
    collapsed,
    logoLoaded,
    currentLang,
    isLoading,
    systemName,
    logo,
    isNewYear,
    isSelfUseMode,
    docsNav,
    isDemoSiteMode,
    isConsoleRoute,
    showThemeToggle,
    showLanguageSelector,
    theme,
    headerNavModules,
    pricingRequireAuth,
    logout,
    handleLanguageChange,
    handleThemeToggle,
    handleMobileMenuToggle,
    navigate,
    t,
  } = useHeaderBar({ onMobileMenuToggle, drawerOpen });

  const [messageModalVisible, setMessageModalVisible] = useState(false);
  const { unreadCount: messageUnreadCount, refreshUnreadCount } =
    useUserMessageUnreadCount(userState?.user);
  const handleMessageModalOpen = useCallback(() => {
    setMessageModalVisible(true);
  }, []);
  const handleMessageModalClose = useCallback(async () => {
    setMessageModalVisible(false);
    await refreshUnreadCount();
  }, [refreshUnreadCount]);

  const { mainNavLinks } = useNavigation(t, docsNav, headerNavModules);

  return (
    <header className="sticky top-0 z-50 w-full border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <UserMessageModal
        visible={messageModalVisible}
        onClose={handleMessageModalClose}
        onReadStateChanged={refreshUnreadCount}
        isMobile={isMobile}
        t={t}
      />

      <div className="flex h-14 items-center px-4 md:px-6">
        <div className="flex items-center gap-2 md:gap-4">
          <MobileMenuButton
            isConsoleRoute={isConsoleRoute}
            isMobile={isMobile}
            drawerOpen={drawerOpen}
            collapsed={collapsed}
            onToggle={handleMobileMenuToggle}
            t={t}
          />

          <HeaderLogo
            isMobile={isMobile}
            isConsoleRoute={isConsoleRoute}
            logo={logo}
            logoLoaded={logoLoaded}
            isLoading={isLoading}
            systemName={systemName}
            isSelfUseMode={isSelfUseMode}
            isDemoSiteMode={isDemoSiteMode}
            t={t}
          />
        </div>

        <div className="min-w-0 overflow-hidden md:hidden">
          <MobileSiteNavDropdown
            mainNavLinks={mainNavLinks}
            pricingRequireAuth={pricingRequireAuth}
            userState={userState}
            isLoading={isLoading}
            t={t}
          />
        </div>

        <div className="flex-1" />

        <div className="flex items-center gap-1 md:gap-2">
          <Navigation
            mainNavLinks={mainNavLinks}
            isMobile={isMobile}
            isLoading={isLoading}
            userState={userState}
            pricingRequireAuth={pricingRequireAuth}
          />

          <ActionButtons
            isNewYear={isNewYear}
            unreadCount={messageUnreadCount}
            onNoticeOpen={handleMessageModalOpen}
            theme={theme}
            onThemeToggle={handleThemeToggle}
            currentLang={currentLang}
            onLanguageChange={handleLanguageChange}
            userState={userState}
            isLoading={isLoading}
            isMobile={isMobile}
            isSelfUseMode={isSelfUseMode}
            showThemeToggle={showThemeToggle}
            showLanguageSelector={showLanguageSelector}
            logout={logout}
            navigate={navigate}
            t={t}
          />
        </div>
      </div>
    </header>
  );
};

export default HeaderBar;