import type NavigationMenuItem from "./NavigationMenuItem.js";
import MenuItemTemplate from "@ui5/webcomponents/dist/MenuItemTemplate.js";
import type { MenuItemHooks } from "@ui5/webcomponents/dist/MenuItemTemplate.js";
import Icon from "@ui5/webcomponents/dist/Icon.js";
import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
import arrowRightIcon from "@ui5/webcomponents-icons/dist/arrow-right.js";

const predefinedHooks: Partial<MenuItemHooks> = {
	listItemContent,
	iconBegin,
	iconEnd,
};

export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<MenuItemHooks>) {
	const currentHooks = { ...predefinedHooks, ...hooks, };

	return <>
		{
			this._href ? (
				<a role="menuitem"
					class="ui5-navmenu-item-link"
					href={this.href}
					target={this.target}
				>
					{MenuItemTemplate.call(this, currentHooks)}
				</a>
			) : MenuItemTemplate.call(this, currentHooks)
		}
	</>;
}

function listItemContent(this: NavigationMenuItem) {
	return <>{this.text}</>;
}

function iconBegin(this: NavigationMenuItem) {
	if (this.hasIcon) {
		return <Icon part="icon"
			class="ui5-li-icon"
			name={this.icon}
		/>;
	}

	if (this._siblingsWithIcon) {
		return <div class="ui5-menu-item-dummy-icon"></div>;
	}
}

function iconEnd(this: NavigationMenuItem) {
	return (<>
		{this.hasTag &&
			<span id={this._tagContainerId} class="ui5-navmenu-item-tag-container">
				<slot name="tag"></slot>
			</span>
		}
		{this.hasSubmenu &&
			<Icon
				part="icon"
				name={slimArrowRightIcon}
				class="ui5-menu-item-icon-end"
			/>
		}
		{!this.hasSubmenu && this.isExternalLink &&
			<Icon
				class="ui5-sn-item-external-link-icon"
				name={arrowRightIcon}
			/>
		}
	</>);
}
