"use client";

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

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

    const toggleOffcanvas = () => setIsOffcanvasOpen(!isOffcanvasOpen);
    const toggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
    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}
                onToggleMobileMenu={toggleMobileMenu}
                onToggleSearch={toggleSearch}
                menuItems={menuItems}
                isLoading={isLoading}
            />

            <Offcanvas isOpen={isOffcanvasOpen} onClose={() => setIsOffcanvasOpen(false)} menuItems={menuItems} />

            <MobileMenu isOpen={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(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;