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

@{
	ProductViewModel product = null;
	if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
	{
		product = (ProductViewModel)Dynamicweb.Context.Current.Items["ProductDetails"];
	}
}

@if (product is object)
{
	string imagePath = product?.DefaultImage?.Value ?? "";
	string imagePathUrlEncoded = Dynamicweb.Context.Current.Server.UrlEncode(imagePath);

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

	string width = Model.Item.GetRawValueString("Width", "auto");
	int smallImageSize = 640;
	int largeImageSize = width == "auto" ? 1280 : Convert.ToInt32(width);

	string ImageObjectFit = Model.Item.GetRawValueString("ImageObjectFit", "contain");

	string imagePathXs = "/Admin/Public/GetImage.ashx?width=" + smallImageSize + "&image=" + imagePathUrlEncoded + "&format=webp";
	string imagePathS = "/Admin/Public/GetImage.ashx?width=" + largeImageSize + "&image=" + imagePathUrlEncoded + "&format=webp";
	string imagePathFallBack = "/Admin/Public/GetImage.ashx?width=" + largeImageSize + "&image=" + imagePathUrlEncoded + "&format=webp";

	bool showFavoritesSelector = !string.IsNullOrEmpty(Model.Item.GetString("ShowAddToFavorites")) ? Model.Item.GetBoolean("ShowAddToFavorites") : false;
	string anonymousUsersLimitations = Pageview.AreaSettings.GetRawValueString("AnonymousUsers", "");
	bool anonymousUser = Pageview.User == null;

	var favoriteParameters = new Dictionary<string, object>();
	if (!anonymousUser && showFavoritesSelector)
	{
		int defaultFavoriteListId = 0;

		IEnumerable<FavoriteList> favoreiteLists = Pageview.User.GetFavoriteLists();
		if (favoreiteLists.Count() == 1)
		{
			foreach (FavoriteList list in favoreiteLists)
			{
				defaultFavoriteListId = list.ListId;
			}
		}

		favoriteParameters.Add("ListId", defaultFavoriteListId);
	}

	MediaViewModel alternativeImage = new MediaViewModel();
	if (Model.Item.GetBoolean("ShowAlternativeImageOnHover")) {
		var selectedImageCategories = Model.Item.GetList("GetAlternativeImageFrom")?.GetRawValue().OfType<string>().ToList();
		List<MediaViewModel> allAssetsImages = product.AssetCategories.Where(x => selectedImageCategories.Contains(x.SystemName)).SelectMany(x => x.Assets).ToList();
		allAssetsImages.RemoveAll(x => x.Value == product.DefaultImage.Value);
		alternativeImage = allAssetsImages.FirstOrDefault();
	}

	string altImagePathXs = string.Empty;
	string altImagePathS = string.Empty;

	if (!string.IsNullOrEmpty(alternativeImage?.Value))
	{
		altImagePathXs = "/Admin/Public/GetImage.ashx?width=" + smallImageSize + "&image=" + Dynamicweb.Context.Current.Server.UrlEncode(alternativeImage.Value) + "&format=webp";
		altImagePathS = "/Admin/Public/GetImage.ashx?width=" + largeImageSize + "&image=" + Dynamicweb.Context.Current.Server.UrlEncode(alternativeImage.Value) + "&format=webp";
	}

	string colorSchemeBorder = !string.IsNullOrWhiteSpace(Model.ColorScheme?.Id) ? "border: 1px solid rgba(0,0,0,0)" : "";
	string imageId = "ProductImage_" + product.Id + product.VariantId.Replace(".", "_");
	string fullWidth = width == "auto" ? "w-100" : "";
	string customWidth = width != "auto" ? "style=\"width: " + width + "px\"" : "style=\"min-width: 60px\"";

	if (!string.IsNullOrEmpty(imagePath))
	{
		<figure class="h-100 @fullWidth position-relative item_@Model.Item.SystemName.ToLower()" @customWidth data-dw-colorscheme="@Model.ColorScheme?.Id">
			<div class="ratio" style="@(ratioVariable)">
				<div class="d-flex justify-content-center align-items-center">
					@if (imagePath.StartsWith("/Files/", StringComparison.OrdinalIgnoreCase))
					{
						<img id="@imageId"
							 srcset="
								@imagePathXs @(smallImageSize)w,
								@imagePathS  @(largeImageSize)w"
							 sizes="(max-width: 992px) 50vw, 25vw"
							 src="@imagePathFallBack"
							 @if (Model.Item.GetBoolean("ShowAlternativeImageOnHover") && !string.IsNullOrEmpty(alternativeImage?.Value)) { <text>
							 data-alternative-image="
									@altImagePathXs @(smallImageSize)w,
									@altImagePathS  @(largeImageSize)w"
							 onmouseenter="swift.Image.swapImage(event)"
							 onmouseout="swift.Image.swapImage(event)"
							 </text> }
							 loading="lazy"
							 decoding="async"
							 class="h-100 w-100"
						 	 style="object-fit: @ImageObjectFit; @colorSchemeBorder"
							 alt="@product.Name"
							itemprop="image">
					}
					else
					{
						<img id="@imageId" 
							src="/Files/@product.DefaultImage.Value"
							 loading="lazy"
							 class="h-100 w-100"
							 style="object-fit: contain; @colorSchemeBorder"
							 alt="@product.Name" 
							 itemprop="image">
					}
				</div>
			</div>

			@if (!anonymousUser)
			{
				if (showFavoritesSelector)
				{
					<div class="position-absolute top-0 end-0 my-3" style="z-index: 2">
						@RenderPartial("Components/ToggleFavorite.cshtml", product, favoriteParameters)
					</div>
				}
			}
		</figure>
	}
}
else if (Pageview.IsVisualEditorMode)
{
	<div class="alert alert-dark m-0">@Translate("The default image will be shown here, if any")</div>
}
