import React from "react";
import {classes, Modify} from "../../Utils";
import {SubmenuFloat} from "./SubmenuFloat";
import {NavLink, NavLinkProps} from "react-router-dom";

/**
 * Main menu item properties.
 */
export type MainMenuItemProperties = React.PropsWithChildren<Modify<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
}>>;

/**
 * Main component of a main menu item.
 */
export const MainMenuItem = React.forwardRef<HTMLAnchorElement, MainMenuItemProperties>(function SubmenuItem({children, ...props}: MainMenuItemProperties, ref)
{
	return (
		<li>
			<a ref={ref} {...props}>{children}</a>
		</li>
	);
});

/**
 * A main menu item link properties.
 */
export type MainMenuLinkProperties = React.PropsWithChildren<Modify<NavLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>, {
}>>;

/**
 * A main menu item link.
 */
export const MainMenuLink = React.forwardRef<HTMLAnchorElement, MainMenuLinkProperties>(function MainMenuLink({children, ...props}: MainMenuLinkProperties, ref)
{
	return (
		<li>
			<NavLink ref={ref} {...props}>{children}</NavLink>
		</li>
	);
});

/**
 * A main menu item that open a submenu.
 */
export function MainMenuItemSubmenu({submenu, className, children, ...props}: Modify<MainMenuItemProperties, {
	/**
	 * The submenu content.
	 */
	submenu: React.ReactNode;
}>)
{
	return (
		<SubmenuFloat submenu={submenu} role={"menu"} floatingOptions={{ placement: "bottom-start" }}>
			<MainMenuItem className={classes("submenu", className)} {...props}>{children}</MainMenuItem>
		</SubmenuFloat>
	);
}