@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"];
	}

	string uniqueId = $"{product.Id}_{product.VariantId.Replace(".", "_")}_{Pageview.CurrentParagraph.ID}";

	var selectedCatalogs = Model.Item.GetList("SelectedCatalogs")?.GetRawValue()?.OfType<string>();
	int catalogCount = 0;
	
	string horizontalAlign = Model.Item.GetRawValueString("HorizontalAlignment", string.Empty);
	horizontalAlign = horizontalAlign == "center" ? "justify-content-center" : horizontalAlign;
	horizontalAlign = horizontalAlign == "end" ? "justify-content-end" : horizontalAlign;
	horizontalAlign = horizontalAlign == "full" ? string.Empty : horizontalAlign;

	string iconPath = "/Files/Images/Icons/";

	string flexFill = Model.Item.GetRawValueString("HorizontalAlignment", "") == "full" ? "flex-fill" : string.Empty;
	string fullWidth = Model.Item.GetRawValueString("HorizontalAlignment", "") == "full" ? "w-100" : string.Empty;
	string icon = Model.Item.GetRawValueString("Icon", iconPath + "printer.svg");
	string label = !icon.Contains("_none") ? $"<span class=\"icon-2\">{ReadFile(icon)}</span>" : string.Empty;
	label += !icon.Contains("_none") && !Model.Item.GetBoolean("HideButtonText") ? " " : string.Empty;
	label += !Model.Item.GetBoolean("HideButtonText") && !string.IsNullOrEmpty(Model.Item.GetString("Title")) ? Model.Item.GetString("Title") : string.Empty;
}

@if (product is object && selectedCatalogs != null && selectedCatalogs.Any())
{
	var ecomLanguages = Dynamicweb.Ecommerce.Services.Languages.GetLanguages();
	var currencies = Dynamicweb.Ecommerce.Services.Currencies.GetAllCurrencies();
	var languageId = Dynamicweb.Ecommerce.Common.Context.LanguageID;
    var areaEcomLanguageId = Pageview.Area.EcomLanguageId;
    var areaEcomCurrencyId = Pageview.Area.EcomCurrencyId;

	<div class="d-flex @horizontalAlign @fullWidth item_@Model.Item.SystemName.ToLower()">
		<button type="button" class="btn btn-primary @flexFill" data-dw-button="primary" data-bs-toggle="modal" data-bs-target="#DownloadPublicationModal@(uniqueId)" style="white-space: nowrap" title="@Model.Item.GetString("Title")" id="DownloadPublication@(uniqueId)">
			@if (!Model.Item.GetBoolean("HideButtonText"))
			{
				<span class="text-nowrap d-flex align-items-center justify-content-center gap-2">
					@label
				</span>
			}
			else
			{
				@label
			}
		</button>
	</div>

	<div class="modal fade" id="DownloadPublicationModal@(uniqueId)" tabindex="-1" aria-labelledby="#DownloadPublicationModalLabel@(uniqueId)" aria-hidden="true">
		<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
			<form target="_blank" action="/Default.aspx?ID=@selectedCatalogs.FirstOrDefault()" method="post" class="modal-content" id="DownloadPublicationModalForm@(uniqueId)">
				<input type="hidden" name="mainproductid" value="@(product.Id)@(product.VariantId)">
				<input type="hidden" name="print" value="true">

				@if (!string.IsNullOrEmpty(product.VariantId))
				{
					<input type="hidden" name="VariantId" value="@product.VariantId">
				}

				<div class="modal-header">
					<h5 class="modal-title" id="DownloadPublicationModalLabel@(uniqueId)">@Translate("Publication for print")</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body p-0">
					<div class="grid gap-0">
						<div class="g-col-12 g-col-lg-4 border-end p-3 p-lg-4">

							@if (Model.Item.GetBoolean("ShowLanguageSelector") && ecomLanguages.Count() > 1) 
							{ 
								<div class="mb-4">
									<label class="form-label">@Translate("Language")</label>
									<select name="RequestLanguageID" class="form-select" aria-label="@Translate("Language")">
										@foreach (var language in ecomLanguages)
										{
											var selected = string.Empty;
											if (language.LanguageId.Equals(areaEcomLanguageId, StringComparison.OrdinalIgnoreCase))
											{
												selected = "selected";
											}
											<option @selected value="@language.LanguageId">@language.GetDisplayName()</option>
										}
									</select>
								</div>
							}


							@if (Model.Item.GetBoolean("ShowCurrencySelector"))
							{
								<div class="mb-4" id="CurrencySelector@(uniqueId)">
									<label class="form-label">@Translate("Currency")</label>
									<select name="RequestCurrencyCode" class="form-select" aria-label="@Translate("Currency")">
										@foreach (var currency in currencies)
										{
											var selected = string.Empty;
											if (currency.Code.Equals(areaEcomCurrencyId, StringComparison.OrdinalIgnoreCase))
											{
												selected = "selected";
											}
											<option @selected value="@currency.Code">@currency.GetName(languageId)</option>
										}
									</select>
								</div>
							}

							@if (Model.Item.GetBoolean("ShowPriceSelector"))
							{
								<div class="mb-4">
									<label class="form-label">@Translate("Show price")</label>
									<div class="form-check">
										<input class="form-check-input" type="radio" name="hideprice" value="false" id="HidePriceFalse@(uniqueId)" checked onchange="document.querySelector('#CurrencySelector@(uniqueId)').classList.remove('d-none')">
										<label class="form-check-label" for="HidePriceFalse@(uniqueId)">
											@Translate("Yes")
										</label>
									</div>
									<div class="form-check">
										<input class="form-check-input" type="radio" name="hideprice" value="true" id="HidePriceTrue@(uniqueId)" onchange="document.querySelector('#CurrencySelector@(uniqueId)').classList.add('d-none')">
										<label class="form-check-label" for="HidePriceTrue@(uniqueId)">
											@Translate("No")
										</label>
									</div>
								</div>
							}

							@if (Model.Item.GetBoolean("ShowCommentField"))
							{
								<div class="mb-4">
									<label for="DealerComment@(uniqueId)">@Translate("Comment")</label>
									<textarea name="DealerComment" class="form-control" rows="6" placeholder="@Translate("Leave a comment here")" id="DealerComment@(uniqueId)"></textarea>
								</div>
							}
						</div>
						<div class="g-col-12 g-col-lg-8 p-3 p-lg-4">
							<div class="grid grid-2 grid-lg-3 gap-lg-4">
								@foreach (var catalog in selectedCatalogs)
								{
									var pageObj = Dynamicweb.Content.Services.Pages.GetPage(Convert.ToInt32(catalog));

									var selected = catalogCount == 0 ? "checked" : string.Empty;
									var radioId = $"CatalogCheck_{Model.ID}_{pageObj.ID}";
									string imagePath = pageObj.Item["Thumbnail"] !=  null ? $"/Admin/Public/GetImage.ashx?image={pageObj.Item["Thumbnail"].ToString()}&width=200&format=webp" : $"https://placehold.co/235x300?text={@Translate("Catalog+Image")}";

									<div class="form-thumb">
										<input class="form-thumb-input visually-hidden" type="radio" name="ID" value="@pageObj.ID" id="@radioId" onclick="document.querySelector('#DownloadPublicationModalForm@(uniqueId)').action='/Default.aspx?ID=@(pageObj.ID)'" @selected>
										<label class="form-thumb-label d-flex flex-column" for="@radioId" role="button">
											<span class="d-block p-1">
												<img class="rounded-2 w-100" style="object-fit:cover" src="@imagePath" />
											</span>
											<span class="d-grid p-3">
												<span class="d-block fw-bold">@pageObj.GetDisplayName()</span>
												@*<span class="d-block opacity-75 fs-7 lh-sm">@catalog.Name</span> // Descriptive text goes here //*@
											</span>
										</label>
									</div>

									catalogCount++;
								}
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" onclick="GetPublication(event)" data-bs-dismiss="modal" class="btn btn-primary" data-dw-button="primary">@Translate("Print")</button>
				</div>
			</form>
		</div>
	</div>

	<script>
		const GetPublication = (e) => {
			const clickedButton = e.currentTarget;
			const form = clickedButton.closest('form');

			form.closest('form').submit();
			
			commentField = form.querySelector('textarea[name="DealerComment"]');
			commentField.value = "";
		};
	</script>
}
else if (Pageview.IsVisualEditorMode)
{
	<div class="d-flex @horizontalAlign @fullWidth item_@Model.Item.SystemName.ToLower()">
		<button type="button" class="btn btn-primary @flexFill" data-dw-button="primary" data-bs-toggle="modal" data-bs-target="#DownloadPublicationModal@(uniqueId)" style="white-space: nowrap" title="@Model.Item.GetString("Title")" id="DownloadPublication@(uniqueId)">
			@if (!Model.Item.GetBoolean("HideButtonText"))
			{
				<span class="text-nowrap d-flex align-items-center justify-content-center gap-2">
					@label
				</span>
			}
			else
			{
				@label
			}
		</button>
	</div>
}
