// src/components/Banners.vue
<template>
  <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-4">
    <div class="col-span-1 md:col-span-1">
      <div v-for="(image, key) in feeds" :key="key" class="mb-4">
        <a :href="image.link" target="_blank" rel="noopener noreferrer" class="block">
          <img
              :src="`${appStore.imageBaseUrl}${image.image.url}`"
              alt="Feed Banner"
              class="w-full object-cover"
              :style="{ height: feedsHeightStyle }"
          />
        </a>
      </div>
    </div>

    <div class="col-span-1 md:col-span-2">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div v-for="(image, key) in fixed" :key="key" class="p-0">
          <div v-if="image.link && image.link.startsWith('/')">
            <router-link :to="image.link" class="block">
              <img
                  :src="`${appStore.imageBaseUrl}${image.image.url}`"
                  alt="Fixed Banner"
                  class="w-full object-cover h-48"
              />
            </router-link>
          </div>
          <div v-else>
            <a :href="image.link" target="_blank" rel="noopener noreferrer" class="block">
              <img
                  :src="`${appStore.imageBaseUrl}${image.image.url}`"
                  alt="Fixed Banner"
                  class="w-full object-cover h-48"
              />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useAppStore } from '@/stores/app';
import { RouterLink } from 'vue-router';

const appStore = useAppStore();

const fixed = ref([]);
const feeds = ref([]);
const fixedHeight = ref(188); // in px, as in original code
const feedsHeight = ref(188); // in px

const feedsHeightStyle = computed(() => {
  return `${feedsHeight.value}px`;
});

onMounted(async () => {
  // ดึงข้อมูล feeds (carousel type)
  const fetchedFeeds = await appStore.find('bottom-banners', 'banner_type=calousel&_limit=1');
  feeds.value = fetchedFeeds;

  // ดึงข้อมูล fixed banners
  const fetchedFixed = await appStore.find('bottom-banners', 'banner_type=fixed&_limit=6');
  fixed.value = fetchedFixed;

  // คำนวณ feedsHeight ตาม fixed banners
  const fixedNumber = fixed.value.length / 3; // Original logic
  if (fixedNumber <= 1) {
    feedsHeight.value = fixedHeight.value;
  } else if (fixedNumber > 1 && fixedNumber <= 2) {
    feedsHeight.value = fixedHeight.value * 2;
  } else if (fixedNumber > 2 && fixedNumber <= 3) {
    feedsHeight.value = fixedHeight.value * 3;
  } else if (fixedNumber > 3 && fixedNumber <= 4) {
    feedsHeight.value = fixedHeight.value * 4;
  }
});
</script>

<style scoped>
/* No specific styles needed, using Tailwind classes */
</style>