<template>
  <div class="flex flex-col lg:flex-row">

    <!-- Left column for carousel -->
    <div class="w-full lg:w-2/5 p-4">
      <div id="banner-carousel" class="relative w-full" data-carousel="slide">
        <!-- Carousel wrapper -->
        <div class="relative h-[400px] overflow-hidden">
          <div
            v-for="(imagePath, index) in imageUrls"
            :key="index"
            :class="['duration-700', 'ease-in-out', activeIndex === index ? 'block' : 'hidden']"
            data-carousel-item
          >
            <img
              :src="getImageSrc(imagePath)"
              class="absolute inset-0 w-[90%] object-cover mx-auto"
              :alt="`Product Image ${index + 1}`"
            />
          </div>
        </div>
        <!-- Slider indicators -->
        <div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
          <button
            v-for="(imagePath, index) in imageUrls"
            :key="index"
            type="button"
            class="w-3 h-3 rounded-full"
            :class="activeIndex === index ? 'bg-black' : 'bg-gray-200'"
            @click="setActiveIndex(index)"
            :aria-label="`Slide ${index + 1}`"
          ></button>
        </div>
        <!-- Slider controls -->
        <button
          type="button"
          class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
          @click="prevSlide"
        >
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 dark:bg-gray-800/30 group-hover:bg-black/70 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
            </svg>
            <span class="sr-only">Previous</span>
          </span>
        </button>
        <button
          type="button"
          class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
          @click="nextSlide"
        >
          <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-black/30 dark:bg-gray-800/30 group-hover:bg-black/70 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
            <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
            </svg>
            <span class="sr-only">Next</span>
          </span>
        </button>
      </div>
    </div>

    <!-- Right column -->
    <div class="w-full lg:w-3/5 p-4">
      <div class="h-full p-4">

        <h2 class="text-lg font-bold mb-2 uppercase text-black">{{ product.name }}</h2>
        <h3 class="mt-1 text-md font-semibold text-gray-400"><span v-html="product.description"></span></h3>
        <br /><br />

        <h3 class="mb-3 font-bold">Select Color:</h3> 
        <hr class="mb-4" />
          <div v-for="i in [2, 3, 4, 5, 6]" :key="`color-${index}-${i}`">
            <div v-if="variation[`ProductColor${i}`]">
              <!-- Hidden radio input -->
              <input
                type="radio"
                :id="`color-${index}-${i}`"
                name="productColor"
                :value="variation[`ProductColor${i}`]"
                v-model="selectedColor"
                class="hidden"
              />
              
              <label
                :for="`color-${index}-${i}`"
                class="color-button float-left"
                :class="{ 'selected': selectedColor === variation[`ProductColor${i}`] }"
              >
                {{ variation[`ProductColor${i}`] }}
              </label>
            </div>
          </div>
          <br clear="all" /><br />

          
          <div class="flex items-center col-span-1">
            <button 
              @click="decreaseValue"
              class="px-2 py-1 text-gray-600 rounded-l"
            >
              <font-awesome-icon icon="minus" />
            </button>
            <input 
              type="text" 
              v-model.number="inputValue"
              class="px-1 py-2 text-center border border-gray-500 w-12 dark:text-gray-900" 
            />
            <button 
              @click="increaseValue"
              class="px-2 py-1 text-gray-600 rounded-r"
            >
              <font-awesome-icon icon="plus" />
            </button>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
    import { ref, computed, watch } from 'vue';
    import { defineProps } from 'vue';
    import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

    const props = defineProps({
        variation: {
          type: Object,
          required: true
        },
        name: {
          type: String,
          required: true
        },
        description: {
          type: String,
          required: true
        }
      });

      const product = computed(() => ({
        name: props.name,
        description: props.description
      }));

    const productClass = computed(() => ({
      'border-gray-300 dark:border-gray-700': true,
      'border-t border-b': false,
      'xl:border-l-2 xl:border-r-2': props.variation.border,
      ':border-0': !props.variation.border
    }));

    const activeIndex = ref(0); // Track the active slide index

    const imageUrls = computed(() => {
      const urls = [
        props.variation.image1,
        props.variation.image2,
        props.variation.image3
      ];
      return urls.filter(Boolean); // Filter out any undefined/null values
    });

    function getImageSrc(imagePath) {
      if (imagePath.startsWith('/src/')) {
        return new URL(imagePath, import.meta.url).href;
      }
      return imagePath;
    }
    const variations = ref();
    const selectedColor = ref('');
    // Function to determine the indices of available color properties dynamically
    function getColorIndices() {
      const maxColors = 10; // Set this to a reasonable maximum number of colors expected
      let indices = [];
      for (let i = 2; i < maxColors; i++) {
        if (variations.value.some(v => v[`ProductColor${i}`])) {
          indices.push(i);
        }
      }
      return indices;
    }

    const setActiveIndex = (index) => {
      activeIndex.value = index;
    };

    const prevSlide = () => {
      activeIndex.value = (activeIndex.value === 0) ? imageUrls.value.length - 1 : activeIndex.value - 1;
    };

    const nextSlide = () => {
      activeIndex.value = (activeIndex.value + 1) % imageUrls.value.length;
    };



    const quantities = ref({});

    const inputValue = ref(0);

    const increaseValue = () => {
      inputValue.value += 1;
    };

    const decreaseValue = () => {
      inputValue.value = Math.max(0, inputValue.value - 1); // Ensure value does not go below 0
    };

    watch(
      () => props.variation,
      (newVariation) => {
        if (newVariation) {
          // Initialize quantities with default values from props
          for (let i = 1; i <= 5; i++) {
            if (newVariation[`ProductQuantity${i}`] !== undefined) {
              quantities.value[i] = newVariation[`ProductQuantity${i}`];
            }
          }
        }
      },
      { immediate: true }
    );


</script>

<style scoped>
    /* Hide the actual radio button */
    .hidden {
      display: none;
    }

    /* Style the label as a button */
    .color-button {
      display: inline-block;
      padding: 10px 20px;
      margin: 5px;
      border-radius: 5px;
      border: 2px solid transparent;
      cursor: pointer;
      background-color: #f0f0f0;
      color: #333;
      text-align: center;
      transition: background-color 0.3s, border-color 0.3s;
    }

    .color-button:hover {
      background-color: #e0e0e0;
    }

    .color-button.selected {
      background-color: #91b1d5;
      color: #fff;
      font-weight: bold;
      border-color: #91b1d5;
    }
</style>