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

@{
	int navigationStartLevel = Model.Item.GetInt32("NavigationStartlevel") > 0 ? Model.Item.GetInt32("NavigationStartlevel") : 3;
	var navigationSettings = new NavigationSettings();
	navigationSettings.StartLevel = navigationStartLevel;
	navigationSettings.Parameters.Add("menu-id", "product-group-list");

	var navigationViewModel = Navigation.GetNavigationViewModel(navigationSettings);
	var navigationTree = new Stack<Dynamicweb.Frontend.Navigation.NavigationTreeNodeViewModel>(navigationViewModel.Nodes);

	AddScript("/Files/Templates/Designs/Swift-v2/Assets/lib/swiffy-slider/dist/js/swiffy-slider.min.js");
	AddStylesheet("/Files/Templates/Designs/Swift-v2/Assets/lib/swiffy-slider/dist/css/swiffy-slider.min.css");
}

@if (navigationViewModel.Nodes.Count() > 0 && !Pageview.IsVisualEditorMode)
{
	while (navigationTree.Count > 0)
	{
		var currentNode = navigationTree.Pop();

		if (currentNode.IsActive && currentNode.Nodes.Count() > 0)
		{
			string layout = Model.Item.GetRawValueString("Layout", "text-bottom");

			string horizontalAlignment = Model.Item.GetRawValueString("HorizontalAlignment", "start");
			horizontalAlignment = $" justify-content-{horizontalAlignment}";

			string ratio = Model.Item.GetRawValueString("ImageAspectRatio", "0");
			string ratioCssClass = ratio != "0" ? " ratio" : string.Empty;
			string ratioVariable = ratio != "0" ? "style=\"--bs-aspect-ratio: " + ratio + "\"" : string.Empty;

			int groupsCount = 0;
			foreach (var subnode in currentNode.Nodes)
			{
				IList<FieldValueViewModel> groupFields = subnode.GetProductGroup().GroupFields;

				if (groupFields != null)
				{
					foreach (FieldValueViewModel field in groupFields)
					{
						if (field.SystemName == "SelectedGroup" && !string.IsNullOrEmpty(field.Value.ToString()))
						{
							if (Convert.ToBoolean(field.Value.ToString()))
							{
								groupsCount++;
							}
						}
					}
				}
			}

			if (groupsCount != 0)
			{
				if (layout != "pill-button")
				{
					<nav id="ProductGroupList_@Model.ID" class="swiffy-slider slider-item-reveal slider-item-nosnap slider-item-show6 slider-nav-round" style="--swiffy-slider-item-count: 10;" aria-label="@Translate("Product groups")">
						<ul class="slider-container @horizontalAlignment">
							@foreach (var subnode in currentNode.Nodes)
							{
								var group = Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(subnode.GroupId);
								IList<FieldValueViewModel> groupFields = subnode.GetProductGroup().GroupFields;
								string groupImage = !string.IsNullOrEmpty(subnode.GroupId) && !string.IsNullOrEmpty(group.LargeImage) ? group.LargeImage : string.Empty;
								if (groupImage.StartsWith("/") && !groupImage.StartsWith("/Files", StringComparison.OrdinalIgnoreCase))
								{
									groupImage = $"/Files{groupImage}";
								}

								bool showGroup = false;
								if (groupFields != null)
								{
									foreach (FieldValueViewModel field in groupFields)
									{
										if (field.SystemName == "SelectedGroup" && !string.IsNullOrEmpty(field.Value.ToString()))
										{
											if (Convert.ToBoolean(field.Value.ToString()))
											{
												showGroup = true;
											}
										}
									}
								}

								if (showGroup)
								{
									string imageRoundedPill = layout == "ball" ? " rounded-pill" : string.Empty;

									<li class="@(string.IsNullOrWhiteSpace(groupImage) && (layout == "ball") ? imageRoundedPill + " overflow-hidden": string.Empty)">
										<a href="@subnode.Link" tabindex="-1" class="text-decoration-none">

											@if (layout == "text-bottom" || layout == "ball")
											{
												<div class="d-flex flex-column justify-content-center align-items-center h-100">
													@if (!string.IsNullOrWhiteSpace(groupImage))
													{

														<div class="@ratioCssClass" @ratioVariable>
															<img loading="lazy" src="/Admin/Public/GetImage.ashx?width=640&crop=0&image=@groupImage" class="overflow-hidden@(imageRoundedPill) img-fluid image-zoom-lg-2-hover" style="object-fit: cover" alt="@subnode.Name">
														</div>
													}

													<div class="@(ratioCssClass)" @ratioVariable>
														<div class="d-flex flex-column align-items-center justify-content-center fs-7 text-center p-2">
															@subnode.Name
														</div>
													</div>
												</div>
											}

											@if (layout == "poster")
											{
												<div class="d-flex flex-column justify-content-center align-items-center h-100 position-relative">
													@if (!string.IsNullOrWhiteSpace(groupImage))
													{
														<div class="@(ratioCssClass)" @ratioVariable>
															<img loading="lazy" src="/Admin/Public/GetImage.ashx?width=640&crop=0&image=@groupImage" class="img-fluid image-zoom-lg-2-hover" style="object-fit: cover" alt="@subnode.Name">
														</div>
														<div class="position-absolute text-center fs-5">
															@subnode.Name
														</div>
													}
													else
													{
														<div class="@(ratioCssClass)" @ratioVariable>
															<div class="d-flex flex-column align-items-center justify-content-center text-center fs-5 p-2">
																@subnode.Name
															</div>
														</div>
													}
												</div>
											}
										</a>
									</li>
								}
							}
						</ul>


						@if (groupsCount > 10)
						{
							<button type="button" title="@Translate("Slide to previous")" class="slider-nav"></button>
							<button type="button" title="@Translate("Slide to next")" class="slider-nav slider-nav-next"></button>
						}
						
						<script>
							swiffyslider.initSlider(document.querySelector('#ProductGroupList_@Model.ID'));
						</script>
					</nav>
				}
				else
				{
					<nav class="d-flex flex-wrap gap-3 align-items-center @horizontalAlignment overflow-x-auto" aria-label="@Translate("Product groups")">
						@foreach (var subnode in currentNode.Nodes)
						{
							string groupImage = "";
							IList<FieldValueViewModel> groupFields = subnode.GetProductGroup().GroupFields;

							if (layout == "pill-button" && groupFields != null)
							{
								foreach (FieldValueViewModel field in groupFields)
								{
									if (field.SystemName == "ProductGroupNavigationImage" && !string.IsNullOrEmpty(field.Value.ToString()))
									{
										groupImage = "/Files/Images/" + field.Value.ToString();
									}
								}
							}

							bool showGroup = false;
							if (groupFields != null)
							{
								foreach (FieldValueViewModel field in groupFields)
								{
									if (field.SystemName == "SelectedGroup" && !string.IsNullOrEmpty(field.Value.ToString()))
									{
										if (Convert.ToBoolean(field.Value.ToString()))
										{
											showGroup = true;
										}
									}
								}
							}

							if (showGroup)
							{
								<a href="@subnode.Link" tabindex="-1" class="btn btn-secondary rounded-pill">
									<div class="d-flex flex-row align-items-center">
										@if (!string.IsNullOrWhiteSpace(groupImage))
										{
											if (Path.GetExtension(groupImage).ToLower() == ".svg")
											{
												<div class="icon-3 me-2" style="width: 35px">
													@ReadFile(groupImage)
												</div>
											}
											else
											{
												<div class="me-3" style="width: 35px">
													<div class="@ratioCssClass" @(ratioVariable)>
														<img loading="lazy" src="/Admin/Public/GetImage.ashx?width=35&crop=0&image=@groupImage" style="object-fit: cover" alt="">
													</div>
												</div>
											}
										}
										<div class="fs-7 text-center text-nowrap">
											@subnode.Name
										</div>
									</div>
								</a>
							}
						}
					</nav>
				}
			}
		}

		foreach (var nextNode in currentNode.Nodes)
		{
			navigationTree.Push(nextNode);
		}
	}
}
else if (Pageview.IsVisualEditorMode)
{
	<div class="alert alert-dark m-0" role="alert">
		<span><i class="fas fa-info-circle mr-3"></i></span> <span>@Translate("Group list: The selected groups will be shown here, if any")</span>
	</div>
}
