@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@using Dynamicweb.Frontend.Navigation
@using Dynamicweb.Ecommerce.ProductCatalog

@functions {

	NavigationTreeViewModel GetNavigationTreeFromPageId(int pageId = 0, bool includeFolders = false, int startLevel = 1, int stopLevel = 9)
	{
		var navigationSettings = new NavigationSettings()
		{
			StartLevel = startLevel,
			StopLevel = stopLevel,
			RootPageId = pageId,
			IncludeFoldersAndHidden = includeFolders,
			ExpandMode = ExpandMode.All,
		};

		return Navigation.GetNavigationViewModel(navigationSettings);
	}

	string GetGroupFieldValue(string fieldSystemName, NavigationTreeNodeViewModel node)
	{
		var productGroup = node.GetProductGroup();
		string fieldValue = string.Empty;
		if (productGroup.GroupFields is not null)
		{
			foreach (var field in productGroup.GroupFields)
			{
				if (field.SystemName == fieldSystemName)
				{
					fieldValue = field.Value?.ToString() ?? string.Empty;
				}
			}
		}
		return fieldValue;
	}

	bool NavigationTreeHasChildren(NavigationTreeNodeViewModel rootNode)
	{
		foreach (var subNode in rootNode.Nodes)
		{
			if (subNode.Nodes.Any())
			{
				return true;
			}
		}
		return false;
	}

	int GetPageIdFromLink(string pageLink)
	{
		return !string.IsNullOrEmpty(pageLink) ? Convert.ToInt32(pageLink.Substring(pageLink.LastIndexOf('=') + 1)) : 0;

	}
	string GetSubmenuType(NavigationTreeNodeViewModel rootNode)
	{
		string submenuType = string.Empty;
		var nodePage = Dynamicweb.Content.Services.Pages.GetPage(rootNode.PageId);
		var pageType = !string.IsNullOrEmpty(nodePage.ItemType) ? nodePage.ItemType : "Swift-v2_Page";
		if (nodePage.PropertyItem is object && nodePage.PropertyItem.TryGetValue("SubmenuType", out object submenuTypeValue))
		{
			submenuType = Dynamicweb.Core.Converter.ToString(submenuTypeValue);
		}
		return submenuType;
	}

	bool IsMegaMenu(NavigationTreeNodeViewModel rootNode, string submenuType)
	{
		switch (submenuType)
		{
			case "dropdown":
				return false;
			case "auto":
				return NavigationTreeHasChildren(rootNode);
			default:
				return true;
		}
	}

	string isActive(NavigationTreeNodeViewModel node)
	{
		return node.IsActive ? "aria-current='page'" : string.Empty;
	}

	string isActiveDropdown(NavigationTreeNodeViewModel node)
	{
		return node.IsActive ? "class=\"active\"" : string.Empty;
	}

	bool GetRelatedContentStructure(IEnumerable<NavigationTreeNodeViewModel> relatedContentNodes)
	{
		bool relatedContentIsNested = false;

		foreach (var relatedContentNode in relatedContentNodes.Where(node => node.ShowInMenu))
		{
			if (relatedContentNode.Nodes.Any())
			{
				return relatedContentIsNested = true;
			}
		}

		return relatedContentIsNested;
	}
}

@{
	// Page settings
	int navigationRootPageId = 0;
	if (Model.Item.TryGetLink("NavigationRoot", out var link))
	{
		navigationRootPageId = link.PageId;
	}
	var rootNavigation = GetNavigationTreeFromPageId(navigationRootPageId);
	int maxEndNodes = 100;
	if (Model.Item.TryGetString("MaxEndNodes", out var maxEndNodesValue))
	{
		maxEndNodes = Dynamicweb.Core.Converter.ToInt32(maxEndNodesValue);
	}
	string maxEndNodesText = Model.Item.GetString("ShowAllLinkLabel");
	string clickable = "text-decoration-underline-hover text-decoration-accent-hover";
}

<div class="nav-wrapper megamenu-wrapper" data-swift-menu="@Model.ID">
	<nav class="d-flex gap-2">
		@foreach (var rootNode in rootNavigation.Nodes.Where(node => node.ShowInMenu))
		{
			string? relatedContentNavigationRoot = GetGroupFieldValue("ProductGroupRelatedContent", rootNode);
			int relatedContentPageId = !string.IsNullOrEmpty(relatedContentNavigationRoot) ? GetPageIdFromLink(relatedContentNavigationRoot) : 0;
			var relatedContentNodes = GetNavigationTreeFromPageId(relatedContentPageId, true).Nodes;
			bool hasRelatedContent = relatedContentNodes.Any() && relatedContentPageId != 0;
			bool relatedContentIsNested = hasRelatedContent ? GetRelatedContentStructure(relatedContentNodes) : false;
			bool nodesExist = rootNode.Nodes.Any() || hasRelatedContent;
			
			string submenuType = GetSubmenuType(rootNode);
			bool isMegaMenu = IsMegaMenu(rootNode, submenuType);
			string submenuTypeCss = isMegaMenu ? "position-static" : string.Empty;
			string dropdown = nodesExist ? "dropdown" : string.Empty;
			string dropdownAttributes = nodesExist ? "role=\"button\" data-bs-toggle=\"dropdown\" data-bs-offset=\"0,0\" aria-expanded=\"false\"" : string.Empty;
		
			<div class="nav-item @dropdown @submenuTypeCss">
				@if (rootNode.IsClickable)
				{
					<a class="nav-link p-2 @clickable" href="@rootNode.Link" @dropdownAttributes @isActive(rootNode)>
						<span class="text-wrap-nowrap">@rootNode.Name</span>
					</a>
				}
				else
				{
					<span class="nav-link p-2" role="button" @dropdownAttributes>
						<span class="text-wrap-nowrap">@rootNode.Name</span>
					</span>
				}

				@if (nodesExist)
				{
					if (isMegaMenu)
					{
						<div class="dropdown-menu border-0 megamenu border-bottom" data-dw-colorscheme="light">
							<div data-swift-container class="overflow-y-auto">
								<div class="d-flex py-4 gap-4">

									@if (hasRelatedContent)
									{
										<div class="col-auto megamenu-col d-flex flex-column pe-4 border-end gap-3">
											@foreach (var relatedContentNode in relatedContentNodes.Where(node => node.ShowInMenu))
											{
												<nav>
													@if (relatedContentNode.IsClickable)
													{
														<a class="nav-link px-0 lh-1 pb-1 mb-1 @clickable" href="@relatedContentNode.Link" @isActive(relatedContentNode)>
															<strong>@relatedContentNode.Name</strong>
														</a>
													}
													else
													{
														<div class="nav-link px-0 lh-1 pb-1 mb-1 pe-none" @isActive(relatedContentNode)>
															<strong>@relatedContentNode.Name</strong>
														</div>
													}

													@foreach (var relatedContentSubNode in relatedContentNode.Nodes.Where(node => node.ShowInMenu))
													{
														if (relatedContentSubNode.IsClickable)
														{
															<a class="nav-link px-0 lh-1 pb-1 @clickable" href="@relatedContentSubNode.Link" @isActive(relatedContentSubNode)>
																<span>@relatedContentSubNode.Name</span>
															</a>
														}
														else
														{
															<div class="nav-link px-0 lh-1 pb-1 pe-none">
																<span>@relatedContentSubNode.Name</span>
															</div>
														}
													}
												</nav>
											}
										</div>

									}

									<div class="col megamenu-grid d-grid gap-3">

										@foreach (var subNode in rootNode.Nodes.Where(node => node.ShowInMenu))
										{
											<div class="megamenu-col">
												@if (subNode.IsClickable)
												{
													<a class="nav-link px-0 lh-1 pb-1 mb-1 @clickable" href="@subNode.Link" @isActive(subNode)>
														<strong>@subNode.Name</strong>
													</a>
												}
												else
												{
													<div class="nav-link px-0 lh-1 pb-1 mb-1 pe-none">
														<strong>@subNode.Name</strong>
													</div>
												}

												@foreach (var (endNode, index) in subNode.Nodes.Select((node, i) => (node, i)))
												{
													if (index < maxEndNodes && endNode.ShowInMenu)
													{
														if (endNode.IsClickable)
														{
															<a class="nav-link px-0 lh-1 pb-1 @clickable" href="@endNode.Link" @isActive(endNode)>
																@endNode.Name
															</a>
														}
														else
														{
															<div class="nav-link px-0 lh-1 pb-1 pe-none">
																@endNode.Name
															</div>
														}

														continue;
													}

													if (!string.IsNullOrWhiteSpace(maxEndNodesText))
													{
														<a class="nav-link px-0 text-decoration-underline mt-1 lh-1" href="@subNode.Link">
															@Translate(maxEndNodesText)
														</a>
													}

													break;
												}
											</div>

										}
									</div>
								</div>
							</div>
						</div>
					}
					else
					{
						<ul class="dropdown-menu dropdown-menu-shadow" data-dw-colorscheme="light">

							@if (hasRelatedContent)
							{
								foreach (var relatedContentNode in relatedContentNodes)
								{
									if (relatedContentNode.IsClickable)
									{
										<li @isActiveDropdown(relatedContentNode)>
											<a class="dropdown-item" href="@relatedContentNode.Link" @isActive(relatedContentNode)>
												<strong>@relatedContentNode.Name</strong>
											</a>
										</li>
									}
									else
									{
										<li>
											<span class="dropdown-item pe-none">
												<strong>@relatedContentNode.Name</strong>
											</span>
										</li>

									}

									foreach (var relatedContentSubNode in relatedContentNode.Nodes.Where(node => node.ShowInMenu))
									{
										if (relatedContentSubNode.IsClickable)
										{
											<li @isActiveDropdown(relatedContentSubNode)>
												<a class="dropdown-item" href="@relatedContentSubNode.Link" @isActive(relatedContentSubNode)>
													<strong>@relatedContentSubNode.Name</strong>
												</a>
											</li>
										}
										else
										{
											<li>
												<span class="dropdown-item pe-none">
													<strong>@relatedContentSubNode.Name</strong>
												</span>
											</li>
										}
									}
								}
								@if (rootNode.Nodes.Any())
								{
									<li class="dropdown-divider"></li>
								}
							}

							@foreach (var subNode in rootNode.Nodes.Where(node => node.ShowInMenu))
							{
								if (subNode.IsClickable)
								{
									<li @isActiveDropdown(subNode)>
										<a class="dropdown-item" href="@subNode.Link" @isActive(subNode)>
											@subNode.Name
										</a>
									</li>
								}
								else
								{ 
									<li>
										<span class="dropdown-item pe-none">
											@subNode.Name
										</span>
									</li>
								}
							}
						</ul>
					}
				}
			</div>
		}
	</nav>
</div>
