dmenu-plus-front/src/components/navigation/BottomNavBar.tsx

'use client';

import React from 'react'
import Link from 'next/link'
import BottomNavLink from './BottomNavLink'
import BottomNavHighlightLink from './BottomNavLinkBig'
import PagerIcon from '../icons/PagerIcon'
import BagIcon from '../icons/BagIcon'
import HeartIcon from '../icons/HeartIcon'
import { useParams, usePathname, useRouter } from 'next/navigation'
import HomeIcon from '../icons/HomeIcon'
import { useTranslation } from 'react-i18next';
import { useCart } from '@/app/[name]/(Main)/cart/hook/useCart';
import { Building } from 'iconsax-react';
import clsx from 'clsx';
import { glassSurfaceNav } from '@/lib/styles/glassSurface';
import { getBottomNavMaskStyle } from './bottomNavShape';
import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
import { toastLoginRequired } from '../Toast';

type BottomNavBarProps = {
  onPagerClick?: () => void;
};

function BottomNavBar({ onPagerClick }: BottomNavBarProps) {

  const params = useParams();
  const { name } = params;
  const pathname = usePathname();
  const isHomeRoute = pathname === `/${name}`;
  const isAboutRoute = pathname.includes('about');
  const buildingVariant = React.useMemo(() => {
    return (isAboutRoute ? 'Bold' : 'Outline') as 'Bold' | 'Outline';
  }, [isAboutRoute]);
  const { isSuccess } = useGetProfile()
  const router = useRouter()
  const { t } = useTranslation('common', {
    keyPrefix: 'BottomNavbar'
  });
  const { items } = useCart();

  const navMaskStyle = React.useMemo(() => getBottomNavMaskStyle(), []);

  const cartItemsCount = React.useMemo(() => {
    return Object.values(items).reduce((total, item) => {
      return total + (item?.quantity || 0);
    }, 0);
  }, [items]);

  const handleFavoritesClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    if (isSuccess) {
      router.push(`/${name}/favorite`);
    } else {
      e.stopPropagation();
      toastLoginRequired(() => router.push(`/${name}/auth`), 'error');
    }
  }

  return (
    <div className="fixed bottom-0 left-0 w-full bg-transparent pointer-events-none">
      <div className="max-w-md mx-auto w-full aspect-436/104 relative z-30">
        <div
          aria-hidden
          className={glassSurfaceNav('absolute inset-0 pointer-events-none')}
          style={navMaskStyle}
        />

        <nav
          className="absolute left-0 right-0 grid grid-cols-5 gap-x-1 items-end px-4 text-[10px] pointer-events-auto"
          style={{
            top: 'calc(10 / 104 * 100%)',
            height: 'calc(80 / 104 * 100%)',
          }}
        >
          <BottomNavLink
            href={`/${name}/cart`}
            icon={<BagIcon width={20} height={20} />}
            value={t('Cart')}
          />
          {onPagerClick ? (
            <button
              onClick={onPagerClick}
              className="flex flex-col justify-arround items-center gap-[5px] text-disabled-text pointer-events-auto **:stroke-disabled-text"
            >
              <PagerIcon width={20} height={20} />
              <span className="text-xs2">
                {t('Pager')}
              </span>
            </button>
          ) : (
            <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value={t('Pager')} />
          )}
          <BottomNavHighlightLink
            href={`/${name}`}
            icon={
              <HomeIcon
                className="transition-all duration-200 stroke-primary"
                fill="white"
                stroke="currentColor"
                variant={isHomeRoute ? 'Bold' : 'Outline'}
                width={20}
                height={20} />}
            value={t('Menu')} />
          <Link
            href={`/${name}/about`}
            className={clsx(
              'flex flex-col justify-arround items-center gap-[5px] pointer-events-auto min-w-0',
              isAboutRoute
                ? 'text-primary **:stroke-primary'
                : 'text-disabled-text **:stroke-disabled-text',
            )}
          >
            <div className="shrink-0">
              <Building
                key={`building-${buildingVariant}-${isAboutRoute}`}
                size={20}
                variant={buildingVariant as 'Bold' | 'Outline'}
                color="currentColor"
                className='stroke-0'
              />
            </div>
            <span className="text-xs2 text-center truncate w-full">
              {t('about')}
            </span>
          </Link>
          <BottomNavLink href={`/${name}/favorite`} onClick={handleFavoritesClick} icon={<HeartIcon width={20} height={20} />} value={t('Favorites')} />
        </nav>

        {cartItemsCount > 0 && (
          <div
            className="absolute left-0 right-0 pointer-events-none"
            style={{
              top: 'calc(10 / 104 * 100%)',
              height: 'calc(80 / 104 * 100%)'
            }}
          >
            <div className="h-full px-4 grid grid-cols-5 gap-x-1 items-end">
              <div className="flex flex-col items-center gap-[5px]">
                <div className="relative shrink-0">
                  <div className="w-5 h-5 opacity-0"></div>
                  <span className="absolute sm:-top-1 sm:-right-1 top-0 -right-1 flex items-center justify-center min-w-[14px] min-h-[14px] px-1 text-[8px] font-medium text-white dark:bg-white dark:text-black bg-primary rounded-full z-50">
                    {cartItemsCount > 99 ? '99+' : cartItemsCount}
                  </span>
                </div>
                <span className="text-xs2 opacity-0">{t('Cart')}</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default BottomNavBar