'use client';

import { useEffect, useState, useCallback } from 'react';
import HeaderTop from './HeaderTop';
import HeaderBottom from './HeaderBottom';
import Offcanvas from './Offcanvas';
import { headerMenuService } from '@/services/header-menu.service';
import { HeaderMenu as HeaderMenuType } from '@/types/header-menu';

const Header = () => {
    const [isOffcanvasOpen, setIsOffcanvasOpen] = useState(false);
    const [isSearchOpen, setIsSearchOpen] = useState(false);
    const [menuItems, setMenuItems] = useState<any[]>([]);
    const [isLoading, setIsLoading] = useState(true);

    const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
    const toggleSearch = () => setIsSearchOpen(!isSearchOpen);

    // Helper to adapt 'children' from API to 'submenu' for the existing components
    const adaptMenu = useCallback((item: HeaderMenuType): any => ({
        label: item.title,
        href: item.url,
        submenu: item.children && item.children.length > 0 
            ? item.children.map((child: HeaderMenuType) => adaptMenu(child)) 
            : undefined
    }), []);

    useEffect(() => {
        const fetchMenu = async () => {
            try {
                setIsLoading(true);
                const data = await headerMenuService.getHeaderMenu();
                const mappedData = data.map(item => adaptMenu(item));
                setMenuItems(mappedData);
            } catch (error) {
                console.error('Error fetching menu in Header:', error);
            } finally {
                setIsLoading(false);
            }
        };

        fetchMenu();
    }, [adaptMenu]);

    return (
        <>
            <HeaderTop />
            <HeaderBottom 
                onToggleOffcanvas={toggleOffcanvas} 
                onToggleSearch={toggleSearch} 
                menuItems={menuItems}
                isLoading={isLoading}
            />
            
            <Offcanvas 
                isOpen={isOffcanvasOpen} 
                onClose={() => setIsOffcanvasOpen(false)} 
                menuItems={menuItems}
            />

            {/* Search Popup */}
            <div className={`search-popup ${isSearchOpen ? 'active' : ''}`}>
                <div 
                    className="search-popup__overlay search-toggler" 
                    onClick={() => setIsSearchOpen(false)}
                ></div>
                <div className="search-popup__content">
                    <form role="search" method="get" className="search-popup__form" action="#">
                        <input type="text" id="search" name="search" placeholder="Search Here..." />
                        <button type="submit" aria-label="search submit" className="search-btn">
                            <span><i className="fa-regular fa-magnifying-glass"></i></span>
                        </button>
                    </form>
                </div>
            </div>
        </>
    );
};

export default Header;