"use client"
import YogaImageComponent from "@/components/yoga.image.component";
import clsx from "clsx";
import Link from "next/link";

export interface MenuItem {
    href?: string;
    label: string;
    children?: MenuItem[];
    active?: boolean,
    styleClass?: string;
}

export interface Props {
    menuItems: MenuItem[];
    imageSrc?: string;
}

const Nav = ({menuItems, imageSrc}: Props) => {

    return (
        <header>
            <div className="main_header">
                <div className="container-fluid">
                    <nav className="navbar navbar-expand-lg navbar-light p-0">
                        <Link className="navbar-brand" href="/">
                            <figure className="mb-0"> {imageSrc && <YogaImageComponent src={imageSrc} alt=""/>}
                            </figure>
                        </Link>
                        <button className="navbar-toggler collapsed" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                            <span className="navbar-toggler-icon"></span>
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul className="navbar-nav">
                                {menuItems.map((menuItem, index) => <MenuItemComponent
                                    key={"nav" + menuItem.href + "_" + index} menuItem={menuItem}/>)}
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </header>
    );
}

interface MenuItemProps {
    menuItem: MenuItem,
    dropdownItem?: boolean,
}

const MenuItemComponent = ({menuItem, dropdownItem}: MenuItemProps) => {
    if (!menuItem) {
        return (<></>);
    }
    if (!menuItem.children || menuItem.children.length == 0) {
        return (
            // <li className="nav-item active">
            <li className={clsx("nav-item", {"active": menuItem.active})}>
                <a className={clsx("nav-link", {"dropdown-item": dropdownItem}, menuItem.styleClass)}
                   href={menuItem.href!}>{menuItem.label}</a>
            </li>
        );
    }

    return (
        <li className={clsx("nav-item", "dropdown", {"active": menuItem.active})}>
            <a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#"
               role="button" data-toggle="dropdown" aria-haspopup="true"
               aria-expanded="false">{menuItem.label}</a>
            <div className="dropdown-menu drop-down-content">
                <ul className="list-unstyled drop-down-pages">
                    {
                        menuItem.children.map((item, index) => <MenuItemComponent
                            key={"child_" + item.href + "_" + index} menuItem={item} dropdownItem={true}/>)
                    }
                </ul>
            </div>
        </li>
    );
}


export default Nav;