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

@functions
{
	private IList<ProductGroupViewModel> GetGroups(string type)
	{
		IList<ProductGroupViewModel> groupList = new List<ProductGroupViewModel> { };

		if (type == "subgroups")
		{
			IList<ProductGroupViewModel> groups = Model.Item.GetValue<IList<ProductGroupViewModel>>("Subgroups");
			if (groups != null)
			{
				foreach (var group in groups)
				{
					var subGroups = Dynamicweb.Ecommerce.Services.ProductGroups.GetSubgroups(Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(group.Id));

					foreach (var subGroup in subGroups)
					{
						var subGroupViewModel = Dynamicweb.Ecommerce.ProductCatalog.ViewModelFactory.CreateView(new ProductGroupViewModelSettings(), subGroup);
						groupList.Add(subGroupViewModel);
					}

				}
			}
		}

		if (type == "selected-groups")
		{
			IList<ProductGroupViewModel> groups = Model.Item.GetValue<IList<ProductGroupViewModel>>("SelectedGroups");
			if (groups != null)
			{
				foreach (var group in groups)
				{
					groupList.Add(group);
				}
			}
		}

		if (type == "subgroups-current")
		{
			var currentGroupId = Dynamicweb.Context.Current.Request.QueryString.Get("GroupID");
			var currentGroup = currentGroupId != null ? Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(currentGroupId) : null;
			var groups = currentGroup != null ? Dynamicweb.Ecommerce.Services.ProductGroups.GetSubgroups(currentGroup) : null;
			if (groups != null)
			{
				foreach (var group in groups)
				{
					var groupViewModel = Dynamicweb.Ecommerce.ProductCatalog.ViewModelFactory.CreateView(new ProductGroupViewModelSettings(), group);
					groupList.Add(groupViewModel);
				}
			}
		}

		return groupList;
	}

	private Dynamicweb.Frontend.LinkViewModel GetLink(ProductGroupViewModel group)
	{
		Dynamicweb.Frontend.LinkViewModel link = new Dynamicweb.Frontend.LinkViewModel();

		link = new Dynamicweb.Frontend.LinkViewModel()
		{
			Url = $"/Default.aspx?ID={GetPageIdByNavigationTag("Shop")}&GroupID={group.Id.Trim()}",
			IsExternal = false
		};

		return link;
	}
}

@{
	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");

	var groups = GetGroups(Model.Item.GetRawValueString("GroupType", "subgroups"));
	string title = Model.Item?.GetString("Title", string.Empty);
	string subtitle = Model.Item?.GetString("SubTitle", string.Empty);
	bool hideTitle = Model.Item?.GetBoolean("HideTitle") ?? false;

	// Styling
	string alignment = Model.Item.GetRawValueString("Alignment", "align-bottom-center-text-center");
	switch (alignment)
	{
		case "align-top-left-text-left":
			alignment = "text-start justify-content-start align-items-start";
			break;
		case "align-top-center-text-center":
			alignment = "text-center justify-content-center align-items-start";
			break;
		case "align-top-right-text-right":
			alignment = "text-end justify-content-end align-items-start";
			break;
		case "align-middle-left-text-left":
			alignment = "text-start justify-content-start align-items-center";
			break;
		case "align-middle-center-text-center":
			alignment = "text-center justify-content-center align-items-center";
			break;
		case "align-middle-right-text-right":
			alignment = "text-end justify-content-end align-items-center";
			break;
		case "align-bottom-left-text-left":
			alignment = "text-start justify-content-start align-items-end";
			break;
		case "align-bottom-center-text-center":
			alignment = "text-center justify-content-center align-items-end";
			break;
		case "align-bottom-right-text-right":
			alignment = "text-end justify-content-end align-items-end";
			break;
	}

	// Slider settings (documentation: swiffyslider.com/configuration)
	string slidesPerPage = $"slider-item-show{Model.Item.GetRawValueString("SlidesPerPage", "5")}";
	string sliderRatio = Model.Item.GetRawValueString("SliderRatio", "original") != "original" ? $"slider-item-ratio {Model.Item.GetRawValueString("SliderRatio", string.Empty)}" : string.Empty;
	string navigationStyle = $"{Model.Item.GetRawValueString("NavigationStyle", "slider-nav-round")}";
	string navigationPlacement = $"{Model.Item.GetRawValueString("NavigationPlacement", "slider-nav-on-slides")}";
	string indicatorStyle = $"{Model.Item.GetRawValueString("IndicatorStyle", string.Empty)}";
	string revealSlides = Model.Item.GetRawValueString("RevealSlides", "no-reveal") == "reveal" ? "slider-item-reveal" : string.Empty;
	string sliderItemsGap = Model.Item.GetRawValueString("SliderItemsGap", "slider-item-gap") == "slider-item-nogap" ? "slider-item-nogap" : string.Empty;
	string navigationAlwaysVisible = (Model.Item.GetBoolean("NavigationAlwaysVisible")) ? "slider-nav-visible" : string.Empty;
	string navigationVisibleOnTouch = (Model.Item.GetBoolean("NavigationVisibleOnTouch")) ? "slider-nav-touch" : string.Empty;
	string navigationShowScrollbar = (Model.Item.GetBoolean("NavigationShowScrollbar")) ? "slider-nav-scrollbar" : string.Empty;
	string scrollBarForceMobile = (Model.Item.GetBoolean("NavigationShowScrollbar")) ? "--swiffy-slider-track-height:0.5rem !important;" : string.Empty;
	string navigationSmall = (Model.Item.GetBoolean("NavigationSmall")) ? "slider-nav-sm" : string.Empty;
	string navigationInvertColors = (Model.Item.GetBoolean("NavigationInvertColors")) ? "slider-nav-dark" : string.Empty;
	string navigationSlideEntirePage = (Model.Item.GetBoolean("NavigationSlideEntirePage")) ? "slider-nav-page" : string.Empty;
	string navigationNoLoop = (Model.Item.GetBoolean("NavigationNoLoop")) ? "slider-nav-noloop" : string.Empty;
	string indicatorsOutsideSlider = (Model.Item.GetBoolean("IndicatorsOutsideSlider") && indicatorStyle != string.Empty) ? "slider-indicators-outside" : string.Empty;
	string indicatorsHighlightActive = (Model.Item.GetBoolean("IndicatorsHighlightActive")) ? "slider-indicators-highlight" : string.Empty;
	string indicatorsInvertColors = (Model.Item.GetBoolean("IndicatorsInvertedColors")) ? "slider-indicators-dark" : string.Empty;
	string indicatorsVisibleOnSmallDevices = (Model.Item.GetBoolean("IndicatorsVisibleOnSmallDevices")) ? "slider-indicators-sm" : string.Empty;
	string animation = Model.Item.GetRawValueString("Animation", string.Empty) != string.Empty ? $"slider-nav-animation {Model.Item.GetRawValueString("Animation")}" : string.Empty;
	string autoplay = (Model.Item.GetBoolean("Autoplay")) ? "slider-nav-autoplay" : string.Empty;
	string autoplayInterval = Model.Item.GetRawValueString("AutoplayInterval", string.Empty);
	bool hideSliderNavigation = false;

	if (navigationStyle == "slider-nav-none")
	{
		hideSliderNavigation = true;
	}

	string titleFontSize = Model.Item.GetRawValueString("TitleFontSize", "h3");
	string subtitleFontSize = Model.Item.GetRawValueString("SubtitleFontSize", "fs-5");
	string maxWidth = Model.Item.GetRawValueString("TextReadability", string.Empty);
	maxWidth = maxWidth == "max-width-on" ? " mw-75ch" : maxWidth;
	maxWidth = maxWidth == "max-width-off" ? string.Empty : maxWidth;

	string buttonStyle = Model.Item.GetRawValueString("ButtonStyle", "primary");

	string buttonSize = Model.Item.GetRawValueString("buttonSize", "regular");
	buttonSize = buttonSize == "small" ? " btn-sm" : buttonSize;
	buttonSize = buttonSize == "regular" ? string.Empty : buttonSize;
	buttonSize = buttonSize == "large" ? " btn-lg" : buttonSize;

	string stretchedLink = Model.Item.GetRawValueString("StretchedLink", string.Empty);
	stretchedLink = stretchedLink == "not-clickable" ? string.Empty : stretchedLink;
	stretchedLink = stretchedLink == "clickable" ? "stretched-link" : stretchedLink;
}

@if (groups is object && groups.Count != 0)
{

	<div class="h-100">
		@if ((!string.IsNullOrEmpty(title) || !string.IsNullOrEmpty(subtitle)) && !hideTitle)
		{
			<div class="pb-2 pb-lg-4">
				<div class="mb-0-last-child">
					@if (!string.IsNullOrEmpty(title))
					{
						<h2 class="@titleFontSize@(maxWidth)">@title</h2>
					}

					@if (!string.IsNullOrEmpty(subtitle))
					{
						<p class="@subtitleFontSize@(maxWidth)">@subtitle</p>
					}
				</div>
			</div>
		}

		<div class="item_@(Model.Item.SystemName.ToLower())">
			<div id="ProductGroupSlider_@Model.ID" class="swiffy-slider @(sliderRatio) @(slidesPerPage) @(navigationStyle) @(revealSlides) @(navigationPlacement) @(navigationAlwaysVisible) @(navigationVisibleOnTouch) @(sliderItemsGap) @(indicatorStyle) @(navigationShowScrollbar) @(navigationSmall) @(navigationInvertColors) @(indicatorsOutsideSlider) @(navigationNoLoop) @(indicatorsHighlightActive) @(indicatorsInvertColors) @(indicatorsVisibleOnSmallDevices) @(navigationSlideEntirePage) @(animation) @(autoplay)" style="@(scrollBarForceMobile)" data-slider-nav-autoplay-interval="@(autoplayInterval)">
				<ul class="slider-container">
					@foreach (var group in groups)
					{
						var groupImage = Dynamicweb.Ecommerce.Services.ProductGroups.GetGroup(group.Id)?.LargeImage;
						if (groupImage.StartsWith("/") && !groupImage.StartsWith("/Files", StringComparison.OrdinalIgnoreCase))
						{
							groupImage = $"/Files{groupImage}";
						}
						
						groupImage = Dynamicweb.Context.Current.Server.UrlEncode(groupImage);
						groupImage = !string.IsNullOrEmpty(groupImage) ? $"/Admin/Public/GetImage.ashx?width=640&crop=0&image={groupImage}&format=webp" : string.Empty;

						<li data-group="@group.Id">
							<div class="card h-100 border-0 rounded-0">
								@if (!string.IsNullOrEmpty(groupImage))
								{
									<img class="card-img rounded-0 h-100" loading="lazy" src="@groupImage" style="object-fit: cover;" alt="@group.Name">
								}
								<div class="@(!string.IsNullOrEmpty(sliderRatio) ? "card-img-overlay " : string.Empty)@(string.IsNullOrEmpty(sliderRatio) && string.IsNullOrEmpty(groupImage) ? "h-100 " : string.Empty)rounded-0 d-grid p-xl-4 @alignment">
									@if (GetLink(group) != null)
									{
										<div class="m-0">
											<a href="@GetLink(group)" class="btn @(buttonSize) btn-@buttonStyle @(stretchedLink)" data-dw-button="@buttonStyle">@group.Name</a>
										</div>
									}
								</div>
							</div>
						</li>
					}
				</ul>

				@if (!hideSliderNavigation)
				{
					<button type="button" title="@Translate("Previous slide")" class="slider-nav" style="z-index:2;">
						<span class="visually-hidden">@Translate("Previous slide")</span>
					</button>
					<button type="button" title="@Translate("Next slide")" class="slider-nav slider-nav-next" style="z-index:2;">
						<span class="visually-hidden">@Translate("Next slide")</span>
					</button>
				}

				@if (indicatorStyle != "slider-indicators-hidden")
				{
					bool isActive = true;
					int slideCount = 1;

					<div class="slider-indicators" style="z-index:2;">
						@foreach (var group in groups)
						{
							<button @(isActive ? "class=\"active\"" : string.Empty) type="button" title='@Translate("Go to slide") @slideCount'>
								<span class="visually-hidden">@Translate("Go to slide") @slideCount</span>
							</button>

							slideCount++;
							isActive = false;
						}
					</div>
				}

			</div>
			<script>
				window.swiffyslider.initSlider(document.querySelector('#ProductGroupSlider_@Model.ID'));
			</script>
		</div>
	</div>
}
else if (Pageview.IsVisualEditorMode)
{
	<div class="alert alert-dark" role="alert">
		<span>@Translate("Group slider"): @Translate("Edit this column to configure")</span>
	</div>
}
