<script lang="ts">
	import { snackImage, snackImages } from "../func.svelte";
	import { storeButton } from "$lib/StoreButtons.svelte";
	import type { ProductPageData } from "./+page.server.ts";
	import "$lib/storeButtons.scss";

	let { data } = $props();

	let currentImageIndex = 0;

	function selectImage(index: number) {
		currentImageIndex = index;
	}

	function prevImage() {
		currentImageIndex = (currentImageIndex - 1 + data.product.images.length) % data.product.images.length;
	}

	function nextImage() {
		currentImageIndex = (currentImageIndex + 1) % data.product.images.length;
	}
</script>

<style lang="scss">
	.ProductPage {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 30px;
	  padding: 40px 20px;
	}

	.ProductPageImageGallery {
	  width: 100%;
	  max-width: 600px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 12px;
	}

	.ProductPageImageMain {
	  width: 100%;
	  position: relative;
	  border-width: 4px;
	  border-style: groove;
	  border-color: var(--accent-2);

	  img {
	    width: 100%;
	    height: auto;
	    display: block;
	  }

	  .GalleryControls {
	    position: absolute;
	    top: 50%;
	    left: 0;
	    right: 0;
	    transform: translateY(-50%);
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    pointer-events: none;

	    .GalleryNav {
	      pointer-events: auto;
	      background: var(--primary);
	      border: 2px groove var(--accent-2);
	      color: white;
	      width: 36px;
	      height: 36px;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	      cursor: pointer;
	      font-size: 1.2rem;
	      opacity: 0.7;

	      &:hover {
	        opacity: 1;
	      }
	    }

	    .GalleryCounter {
	      color: white;
	      font-size: 1rem;
	      background: rgba(0, 0, 0, 0.5);
	      padding: 4px 10px;
	      border: 1px groove var(--accent-2);
	      pointer-events: auto;
	      user-select: none;
	    }
	  }
	}

	.ProductPageThumbnails {
	  display: flex;
	  gap: 8px;
	  flex-wrap: wrap;
	  justify-content: center;

	  .Thumbnail {
	    width: 60px;
	    height: 60px;
	    border: 2px groove var(--accent-2);
	    cursor: pointer;
	    opacity: 0.5;
	    transition: opacity 0.2s;

	    &:hover {
	      opacity: 0.8;
	    }

	    &.active {
	      opacity: 1;
	      border-color: var(--accent-1);
	    }

	    img {
	      width: 100%;
	      height: 100%;
	      object-fit: cover;
	      display: block;
	    }
	  }
	}

	.ProductPageDetails {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 20px;
	  width: 100%;
	  max-width: 600px;
	}

	.ProductPageInfo {
	  text-align: center;
	  display: flex;
	  flex-direction: column;
	  gap: 12px;
	}

	.ProductPageCategory {
	  font-size: 0.9rem;
	  text-transform: uppercase;
	  letter-spacing: 2px;
	  color: var(--accent-1);
	  border-bottom: 2px groove var(--accent-2);
	  padding-bottom: 6px;
	  width: fit-content;
	  margin: 0 auto;
	}

	.ProductPageInfo h1 {
	  font-size: 2rem;
	  margin: 0;
	}

	.ProductPageInfo p {
	  font-size: 1.1rem;
	  margin: 0;
	  max-width: 450px;
	}

	.ProductPageButtons {
	  display: flex;
	  flex-direction: row;
	  gap: 12px;
	  padding: 10px;
	  width: 100%;
	  max-width: 400px;
	  justify-content: center;
	}
</style>

<svelte:head>
	<title>{data.product.name} | Doloro Store</title>
	<meta name="description" content={data.product.description} />
	<meta property="og:type" content="product" />
	<meta property="og:title" content={data.product.name} />
	<meta property="og:description" content={data.product.description} />
	<meta property="og:url" content={data.url} />
</svelte:head>

<div class="ProductPage">
	<div class="ProductPageImageGallery">
		<div class="ProductPageImageMain">
			{#if data.product.images.length > 1}
				<div class="GalleryControls">
					<button class="GalleryNav prev" on:click={prevImage}>‹</button>
					<span class="GalleryCounter">{currentImageIndex + 1} / {data.product.images.length}</span>
					<button class="GalleryNav next" on:click={nextImage}>›</button>
				</div>
			{/if}
			<enhanced:img src={snackImage(data.product.images[currentImageIndex])} alt={data.product.name} />
		</div>
		{#if data.product.images.length > 1}
			<div class="ProductPageThumbnails">
				{#each data.product.images as img, i}
					<div class="Thumbnail {i === currentImageIndex ? 'active' : ''}" on:click={() => selectImage(i)}>
						<enhanced:img src={snackImage(img)} alt={`${data.product.name} image ${i + 1}`} />
					</div>
				{/each}
			</div>
		{/if}
	</div>
	<div class="ProductPageDetails">
		<div class="ProductPageInfo">
			<span class="ProductPageCategory">{data.product.category}</span>
			<h1>{data.product.name}</h1>
			<p>{data.product.description}</p>
		</div>
		<div class="ProductPageButtons">
			{#if data.product.gumroad != undefined}
				{@render storeButton("gumroad", data.product.gumroad!)}
			{/if}
			{#if data.product.jinxxy != undefined}
				{@render storeButton("jinxxy", data.product.jinxxy!)}
			{/if}
		</div>
	</div>
</div>
