import { BUNDLES_ENABLED } from '@/lib/features'; import React, { useState, useEffect, useRef, useMemo } from 'react'; import Link from 'next/link'; import MobileMenu from './MobileMenu'; import SearchDropdown from './SearchDropdown'; import { useCart } from '../context/CartContext'; import { useAuth } from '../context/AuthContext'; interface MenuItem { label: string; href?: string; hasDropdown?: boolean; dropdownItems?: { label: string; href: string }[]; } interface Brand { id: number; name: string; slug: string; } interface Category { id: number; name: string; slug: string; sort_order: number; } interface TopNavbarProps { onHoverChange?: (isHovering: boolean) => void; } const TopNavbar: React.FC = ({ onHoverChange }) => { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [isSearchOpen, setIsSearchOpen] = useState(false); const [isMobileSearchOpen, setIsMobileSearchOpen] = useState(false); const [mobileSearchTerm, setMobileSearchTerm] = useState(''); const [hoveredItem, setHoveredItem] = useState(null); const [activeDropdown, setActiveDropdown] = useState(null); const [brands, setBrands] = useState([]); const [categories, setCategories] = useState([]); const { getTotalItems } = useCart(); const { isAuthenticated, user } = useAuth(); const mobileSearchRef = useRef(null); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (mobileSearchRef.current && !mobileSearchRef.current.contains(event.target as Node)) { setIsMobileSearchOpen(false); } }; if (isMobileSearchOpen) { document.addEventListener('mousedown', handleClickOutside); return () => document.removeEventListener('mousedown', handleClickOutside); } }, [isMobileSearchOpen]); useEffect(() => { const fetchData = async () => { try { const [brandsResponse, categoriesResponse] = await Promise.all([ fetch('/api/brands'), fetch('/api/categories'), ]); const brandsData = brandsResponse.ok ? await brandsResponse.json() : []; const categoriesData = categoriesResponse.ok ? await categoriesResponse.json() : []; setBrands(Array.isArray(brandsData) ? brandsData : []); setCategories(Array.isArray(categoriesData) ? categoriesData : []); } catch (error) { setBrands([]); setCategories([]); } }; fetchData(); }, []); const menuItems: MenuItem[] = useMemo(() => [ { label: 'Celé parfémy', hasDropdown: true, dropdownItems: Array.isArray(categories) ? categories.map((category) => ({ label: category.name, href: `/parfemy/${category.slug}`, })) : [], }, { label: 'Značky', hasDropdown: true, dropdownItems: Array.isArray(brands) ? brands.map((brand) => ({ label: brand.name, href: `/brands/${brand.slug}`, })) : [], }, { label: 'Výprodej', href: '/vyprodej' }, ...(BUNDLES_ENABLED ? [{ label: 'Výhodné sady', href: '/vyhodne-sady' }] : []), { label: 'Dárkové poukazy', href: '/darkove-poukazy' }, ], [brands, categories]); const handleItemEnter = (itemLabel: string) => { setHoveredItem(itemLabel); const item = menuItems.find(m => m.label === itemLabel); if (item?.hasDropdown) { setActiveDropdown(itemLabel); onHoverChange?.(false); } }; return ( <> {/* Row 1: Logo, Search, Actions */} {/* Mobile Search Bar */} {isMobileSearchOpen && (
setMobileSearchTerm(e.target.value)} onFocus={() => setIsMobileSearchOpen(true)} className="w-full pl-10 pr-4 py-2.5 bg-luxury-dark/50 text-luxury-light rounded-lg border-2 border-luxury-gold/50 focus:outline-none focus:ring-2 focus:ring-luxury-gold focus:border-luxury-gold transition-all placeholder:text-luxury-gold/60 shadow-sm hover:border-luxury-gold/70" /> 0} onClose={() => { setIsMobileSearchOpen(false); setMobileSearchTerm(''); }} />
)} setIsMobileMenuOpen(false)} /> {/* Row 2: Menu Items */} ); }; export default TopNavbar;