@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.Navigation.NavigationTreeViewModel>
@using System.IO
@using System.Text.RegularExpressions
@using Dynamicweb
@using Dynamicweb.Ecommerce.ProductCatalog

@functions {

	public string GetGroupFieldValue(string systemName, IList<FieldValueViewModel> groupFields)
	{
		if (groupFields is null)
		{
			return string.Empty;
		}
		return groupFields.FirstOrDefault(field => field.SystemName == systemName)?.Value.ToString() ?? string.Empty;
	}

	public string GetImagePathSanitized(string imagePath) {
		if (!imagePath.StartsWith("/Files", StringComparison.OrdinalIgnoreCase))
		{
			if (!imagePath.StartsWith("Files/", StringComparison.OrdinalIgnoreCase))
			{
				imagePath = $"/Files/Images/{imagePath}";
			}
		}
		return imagePath;
	}
}

<nav class="nav flex-column h-auto w-100 left-0 top-0 offcanvas-navigation" data-swift-nav="@(Model.Parameters["NavType"])">
	@foreach (var node in Model.Nodes)
	{
		await NavItemHelper(node);
	}
</nav>

@{ 
	async Task NavItemHelper(Dynamicweb.Frontend.Navigation.NavigationTreeNodeViewModel currentNode)
	{
		bool showProductGroupImage = Model.Parameters.ContainsKey("ShowProductGroupImage") ? Convert.ToBoolean(Model.Parameters["ShowProductGroupImage"].ToString()) : false;
		bool showProductGroupPromotionImage = Model.Parameters.ContainsKey("ShowProductGroupPromotionImage") ? Convert.ToBoolean(Model.Parameters["ShowProductGroupPromotionImage"].ToString()) : false;
		string arrowLeftIconPath = "/Files/Images/Icons/chevron-left.svg";
		string arrowRightIconPath = "/Files/Images/Icons/chevron-right.svg";
		var nodePage = Dynamicweb.Content.Services.Pages.GetPage(currentNode.PageId);
		var paragraphId = Pageview.CurrentParagraph.ID;
		string groupId = !string.IsNullOrEmpty(currentNode.GroupId) ? currentNode.GroupId : string.Empty;
		string? productId = Dynamicweb.Context.Current?.Request["ProductID"] != null ? Dynamicweb.Context.Current?.Request["ProductID"]?.ToString() : string.Empty;
		string? variantId = Dynamicweb.Context.Current?.Request["VariantID"] != null ? Dynamicweb.Context.Current?.Request["VariantID"]?.ToString() : string.Empty;
		string productGroupImageSize = "40";
		Regex reg = new Regex(@"\(([^\)]+)\)");
		var hasChildren = currentNode.Nodes.Count() > 0;
		var nodeId = !string.IsNullOrEmpty(currentNode.GroupId) ? currentNode.GroupId : currentNode.PageId.ToString();
		var inPathChecked = currentNode.InPath ? "checked" : string.Empty;
		var inPathClass = currentNode.InPath ? " in-path" : string.Empty;
		var activeClass = currentNode.IsActive ? " active fw-bold" : string.Empty;
		var hasProductGroup = !string.IsNullOrEmpty(currentNode.GetProductGroup().Id);
		
		if (currentNode.ShowInMenu)
		{
			<div class="nav-item d-flex align-items-center w-100 py-1">
				@if (currentNode.IsClickable)
				{
					<a class="nav-link position-relative d-flex align-items-center gap-3 flex-grow-1@(activeClass)@(inPathClass)" @(currentNode.IsActive ? "aria-current='page'" : string.Empty) href="@currentNode.Link" id="@nodeId">						
						
						@if (hasProductGroup)
						{
							var group = currentNode.GetProductGroup();
							var groupImage = GetGroupFieldValue("ProductGroupNavigationImage", group.GroupFields);
							
							if (showProductGroupImage && !string.IsNullOrEmpty(groupImage))
							{
								var groupImagePath = GetImagePathSanitized(groupImage);
								var groupImageGetImage = $"/Admin/Public/GetImage.ashx?Image={groupImagePath}&Width={productGroupImageSize}&Height={productGroupImageSize}&crop=0";

								if (groupImage.EndsWith(".svg", StringComparison.OrdinalIgnoreCase))
								{
									<span class="icon-auto" style="height:@(productGroupImageSize)px; width:@(productGroupImageSize)px;">
										@ReadFile(groupImage)
									</span>
								}
								else
								{	
									<img loading="lazy" alt="@group.Name" width="@productGroupImageSize" height="@productGroupImageSize" src="@groupImageGetImage">
								}
							}
						}
						<span class="flex-grow-1">
							@currentNode.Name
						</span>
					</a>

					if (hasChildren)
					{
						<label class="nav-link position-relative" for="nav_@(paragraphId)_@(nodeId)">
							<span class="visually-hidden">@Translate("Unfold") @currentNode.Name</span>
							<span class="btn btn-secondary p-1 icon-2" data-dw-button="secondary">@ReadFile(arrowRightIconPath)</span>
						</label>
					}
				}
				else
				{
					<label class="nav-link position-relative d-flex align-items-center gap-3 flex-grow-1@(activeClass)@(inPathClass)" @(currentNode.IsActive ? "aria-current='page'" : "") for="nav_@(paragraphId)_@(nodeId)">
						<span class="visually-hidden">@Translate("Unfold") @currentNode.Name</span>
						@if (hasProductGroup)
						{
							var group = currentNode.GetProductGroup();
							var groupImage = GetGroupFieldValue("ProductGroupNavigationImage", group.GroupFields);
							
							if (showProductGroupImage && !string.IsNullOrEmpty(groupImage))
							{
								var groupImagePath = GetImagePathSanitized(groupImage);
								var groupImageGetImage = $"/Admin/Public/GetImage.ashx?Image={groupImagePath}&Width={productGroupImageSize}&Height={productGroupImageSize}&crop=0";

								if (groupImage.EndsWith(".svg", StringComparison.OrdinalIgnoreCase))
								{
									<span class="icon-auto" style="height:@(productGroupImageSize)px; width:@(productGroupImageSize)px;">
										@ReadFile(groupImage)
									</span>
								}
								else
								{	
									<img loading="lazy" alt="@group.Name" width="@productGroupImageSize" height="@productGroupImageSize" src="@groupImageGetImage">
								}
							}
						}

						<span class="flex-grow-1">
							@currentNode.Name
						</span>

						@if (hasChildren)
						{
							<span class="btn btn-secondary p-1 icon-2" data-dw-button="secondary">@ReadFile(arrowRightIconPath)</span>
						}
					</label>
				}

				@if (hasChildren)
				{
					<input type="checkbox" class="visually-hidden sub-nav-check" id="nav_@(paragraphId)_@(nodeId)" @inPathChecked>
					<div class="nav sub-nav position-absolute h-100 opacity-0 pe-none invisible w-100 left-0 top-0">
						<div class="h-100 w-100 overflow-y-auto overflow-x-hidden">
							<div class="nav-header border-bottom position-relative py-1">
								<label class="nav-link position-relative d-flex align-items-center gap-2 flex-grow-1" for="nav_@(paragraphId)_@(nodeId)">
									<span class="visually-hidden">@Translate("Go back to") @currentNode.Name</span>
									<span class="btn btn-secondary p-1 icon-2" data-dw-button="secondary">@ReadFile(arrowLeftIconPath)</span>										
									<span class="flex-grow-1 fs-7">@currentNode.Name</span>
								</label>
							</div>

							@foreach (var node in currentNode.Nodes)
							{
								await NavItemHelper(node);
							}

							@if (hasProductGroup)
							{
								var group = currentNode.GetProductGroup();

								if (showProductGroupImage)
								{
									var groupName = group.Name;

									if (group.GroupFields.Count > 0)
									{	
										string productGroupPromotionImage = GetGroupFieldValue("ProductGroupPromotionImage", group.GroupFields);
										string productGroupPromotionDescription = GetGroupFieldValue("ProductGroupPromotionDescription", group.GroupFields);
										string productGroupPromotionLinkLabel = GetGroupFieldValue("ProductGroupPromotionLinkLabel", group.GroupFields);
										string productGroupPromotionLink = GetGroupFieldValue("ProductGroupPromotionLink", group.GroupFields);
										
										if (!string.IsNullOrEmpty(productGroupPromotionImage))
										{
											productGroupPromotionLink = !string.IsNullOrEmpty(productGroupPromotionLink) ? productGroupPromotionLink : currentNode.Link;
											
											string productGroupPromotionImagePath = $"/Admin/Public/GetImage.ashx?Width=480&crop=0&image={GetImagePathSanitized(productGroupPromotionImage)}";
													
											<div class="mt-3 mx-3">

												<a href="@productGroupPromotionLink" title="@groupName">
													<figure class="ratio ratio-16x9">
														<img class="img-fluid" src="@productGroupPromotionImagePath" alt="@groupName" style="object-fit:cover">
													</figure>
												</a>
												
												@if (!string.IsNullOrEmpty(productGroupPromotionDescription) || !string.IsNullOrEmpty(productGroupPromotionLinkLabel))
												{
													if (!string.IsNullOrEmpty(productGroupPromotionDescription))
													{
														<h6>@productGroupPromotionDescription</h6>
													}
													if (!string.IsNullOrEmpty(productGroupPromotionLinkLabel))
													{
														productGroupPromotionLink = !string.IsNullOrEmpty(productGroupPromotionLink) ? productGroupPromotionLink : currentNode.Link;

														<a href="@productGroupPromotionLink" title="@productGroupPromotionLinkLabel" class="btn btn-primary" data-dw-button="primary">@productGroupPromotionLinkLabel</a>
													}
												}
											</div>
										}
									}

								}
							}
						</div>
					</div>
				}
			</div>
		}
	}
}
