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

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

@if (product is object)
{
	int itemSourcePageId = Convert.ToInt32(Model.Item.GetRawValueString("ListComponentSource", "0"));

	string gridColumnSize = Model.Item.GetRawValueString("GridLayoutDesktop", "3-columns");
	gridColumnSize = gridColumnSize == "2-columns" ? "g-col-lg-6" : gridColumnSize;
	gridColumnSize = gridColumnSize == "3-columns" ? "g-col-lg-4" : gridColumnSize;
	gridColumnSize = gridColumnSize == "4-columns" ? "g-col-lg-3" : gridColumnSize;
	gridColumnSize = gridColumnSize == "6-columns" ? "g-col-lg-2" : gridColumnSize;
	gridColumnSize = gridColumnSize == "list" ? "" : gridColumnSize;

	string gridColumnMobileSize = Model.Item.GetRawValueString("GridLayoutMobile", "2-columns");
	gridColumnMobileSize = gridColumnMobileSize == "list" ? "g-col-12" : gridColumnMobileSize;
	gridColumnMobileSize = gridColumnMobileSize == "2-columns" ? "g-col-6" : gridColumnMobileSize;

	var bomConfiguration = product.GetBomConfiguration();
	var products = bomConfiguration.Items;
	var productGroups = bomConfiguration.Groups;
	int productsCount = products.Count();
	int groupsCount = productGroups.Count(); 
	productsCount += groupsCount;
	string productsCountLabel = productsCount == 1 ? "product" : "products";

	if (productsCount > 0) {
		<div data-dw-colorscheme="@Model.ColorScheme?.Id">
			<p class="pt-3 border-top">
				@Translate("The product package consists of:") @productsCount @productsCountLabel
			</p>

			<div class="grid pb-3">
				@foreach (var prod in products)
				{
					var bomProduct = prod.Product.GetProduct();

					if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
					{
						Dynamicweb.Context.Current.Items["ProductDetails"] = bomProduct;
					}
					else
					{
						Dynamicweb.Context.Current.Items.Add("ProductDetails", bomProduct);
					}

					if (Dynamicweb.Context.Current.Items.Contains("ProductQuantity"))
					{
						Dynamicweb.Context.Current.Items["ProductQuantity"] = prod.Quantity;
					}
					else
					{
						Dynamicweb.Context.Current.Items.Add("ProductQuantity", prod.Quantity);
					}

					if (Dynamicweb.Context.Current.Items.Contains("PriceType"))
					{
						Dynamicweb.Context.Current.Items["PriceType"] = product.PriceType;
					}
					else
					{
						Dynamicweb.Context.Current.Items.Add("PriceType", product.PriceType);
					}

					if (Model.Item.GetString("ListComponentSource") != null)
					{
						<article class="@gridColumnMobileSize @gridColumnSize d-flex flex-column position-relative product js-product" data-product-id="@bomProduct.Id" data-variant-id="@bomProduct.VariantId" itemscope itemtype="https://schema.org/Product">
							@RenderGrid(itemSourcePageId)
						</article>
					}
				}
			</div>
		</div>
	}

	if (groupsCount > 0) {
		<div class="js-product-bom-configurator" data-dw-colorscheme="@Model.ColorScheme?.Id">
			@foreach (var group in productGroups)
			{
				<p class="pt-3 border-top">
					@Translate("Select") @group.Name.ToLower()
				</p>

				<div class="grid pb-3">
					@foreach (var prod in group.Products)
					{
						var bomProduct = prod.GetProduct();

						if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
						{
							Dynamicweb.Context.Current.Items["ProductDetails"] = bomProduct;
						}
						else
						{
							Dynamicweb.Context.Current.Items.Add("ProductDetails", bomProduct);
						}

						if (Dynamicweb.Context.Current.Items.Contains("ProductQuantity"))
						{
							Dynamicweb.Context.Current.Items["ProductQuantity"] = 1;
						}
						else
						{
							Dynamicweb.Context.Current.Items.Add("ProductQuantity", 1);
						}

						if (Dynamicweb.Context.Current.Items.Contains("PriceType"))
						{
							Dynamicweb.Context.Current.Items["PriceType"] = product.PriceType;
						}
						else
						{
							Dynamicweb.Context.Current.Items.Add("PriceType", product.PriceType);
						}

						if (Model.Item.GetString("ListComponentSource") != null)
						{

							<article class="@gridColumnMobileSize @gridColumnSize d-flex align-items-center gap-4 product js-product" data-product-id="@bomProduct.Id" itemscope itemtype="https://schema.org/Product">
								<input type="radio" id="BomVariant_@(prod.ProductId)" class="form-check-input js-bom-variant" name="@group.Id" value="@prod.ProductId" checked="@(group.DefaultProduct?.ProductId == prod.ProductId)">
								<label class="form-check-label w-100" for="BomVariant_@(prod.ProductId)@(prod.VariantId)">
									@RenderGrid(itemSourcePageId)

									@if (bomProduct.VariantInfo?.VariantInfo != null) {
										<select class="form-select js-bom-variant" onchange="this.closest('article').querySelector('input').checked=true;this.closest('article').querySelector('input').value=this.value" style="width: fit-content; min-width: 10rem;">
											@foreach (var firstDimension in bomProduct.VariantInfo?.VariantInfo)
											{
												if (firstDimension.VariantInfo != null)
												{
													foreach (var secondDimension in firstDimension?.VariantInfo)
													{	
														var optionId = $"{prod?.ProductId}|{firstDimension?.OptionID}.{secondDimension?.OptionID}";
														<option value="@optionId">@firstDimension?.OptionName - @secondDimension?.OptionName</option>
													}
												} 
												else
												{
													var optionId = $"{prod?.ProductId}|{firstDimension?.OptionID}";
													<option value="@optionId">@firstDimension?.OptionName</option>
												}
											}
										</select>
									}
								</label> 
							</article>
						}
					}
				</div>
			}
		</div>
	}
	
	if ((productsCount == 0 || groupsCount == 0) && Pageview.IsVisualEditorMode)
	{
		<div class="alert alert-dark m-0">@Translate("No BOM items available")</div> 
	}

	// Set the product back to the original product
	if (Dynamicweb.Context.Current.Items.Contains("ProductDetails"))
	{
		Dynamicweb.Context.Current.Items["ProductDetails"] = product;
	}
	else
	{
		Dynamicweb.Context.Current.Items.Add("ProductDetails", product);
	}
}
else if (Pageview.IsVisualEditorMode)
{
	<div class="alert alert-dark m-0">@Translate("No products available")</div>
}