package views

import (
	"fmt"
	"shop.tonybtw.com/internal/models"
)

func get_all_images(product models.Product, images []models.Product_Image) []string {
	var urls []string
	urls = append(urls, product.Image_URL)
	for _, img := range images {
		urls = append(urls, img.Image_URL)
	}
	return urls
}

templ Product(product models.Product, variants []models.Variant, images []models.Product_Image, cart_count int) {
	@Layout(product.Name) {
		<div class="product-detail">
			<div class="product-gallery" x-data={ fmt.Sprintf("{ active: 0, images: %s }", to_json(get_all_images(product, images))) }>
				<img :src="images[active]" :alt="active" class="gallery-main"/>
				if len(images) > 0 {
					<div class="gallery-thumbs">
						<template x-for="(img, index) in images" :key="index">
							<img
								:src="img"
								:class="{ 'active': active === index }"
								@click="active = index"
								class="gallery-thumb"
							/>
						</template>
					</div>
				}
			</div>
			<div class="product-info">
				<h1>{ product.Name }</h1>
				<p class="product-price">{ Format_Price(product.Price) }</p>
				<p class="product-description">{ product.Description }</p>
				<form hx-post="/cart/add" hx-target="#cart-widget" hx-swap="outerHTML">
					<input type="hidden" name="product_id" value={ templ.EscapeString(fmt.Sprintf("%d", product.ID)) }/>
					<label for="variant_id">Size:</label>
					<select name="variant_id" id="variant_id" required>
						for _, variant := range variants {
							<option value={ templ.EscapeString(fmt.Sprintf("%d", variant.ID)) }>
								{ variant.Size }
							</option>
						}
					</select>
					<label for="quantity">Quantity:</label>
					<select name="quantity" id="quantity">
						for i := 1; i <= 10; i++ {
							<option value={ templ.EscapeString(fmt.Sprintf("%d", i)) }>{ templ.EscapeString(fmt.Sprintf("%d", i)) }</option>
						}
					</select>
					<button type="submit" class="btn-primary">Add to Cart</button>
				</form>
			</div>
		</div>
	}
}