<template>
  <div class="px-10 items-center justify-center mb-32">
    <div>
      <div class="grid lg:grid-cols-3 grid-cols-1 md:grid-cols-2 gap-8 mb-6">
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample1.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample2.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample3.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample1.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample2.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample3.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample1.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample2.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample3.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample1.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample2.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
        <div>
          <div class="group">
            <div>
              <div
                class="img-wrapper relative w-full h-0 rounded-[30px]"
                style="padding-top: 66.67%"
              >
                <img
                  class="inner-img absolute top-0 left-0 w-full h-full object-cover rounded-[30px]"
                  src="/images/sample3.png"
                />
              </div>
            </div>

            <div class="mt-6">
              <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <p class="text-[#EC2029] uppercase text-sm font-bold">
                    K-FOOD
                  </p>
                  <div class="border-l border-gray-300 h-4"></div>
                  <span class="text-gray-400 text-sm"> 18 MAY 2025 </span>
                </div>
                <div class="flex items-center space-x-6">
                  <img class="" src="/icon/heart-fill.svg" />
                  <img class="" src="/icon/bookmark.svg" />
                </div>
              </div>
              <p
                class="text-xl font-bold text-blue-800 mt-3 transition-colors duration-300 ease-in-out group-hover:text-red-600"
              >
                Vel illum qui dolorem eum fugiat consectetur
              </p>
              <p class="mt-3 text-gray-600 line-clamp-3">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                accusantium doloremque laudantium, totam rem aperiam omnis iste.
              </p>
              <div class="flex items-center justify-between mt-6"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useFetch } from "nuxt/app";
const appConfig = useAppConfig();

// function getCategoryParams(cat) {
//   return new URLSearchParams({
//     category: cat || "", // Specify your category
//   }).toString();
// }

// // Construct any additional parameters if needed
// const additionalParams = new URLSearchParams({}).toString();

// // Combine all parameters
// const params = `${getCategoryParams()}&${additionalParams}`;

// // Fetch data using useFetch
// const { data: products } = await useFetch(
//   `${appConfig.api.url}/api/articles?${params}`,
//   {
//     method: "GET",
//   }
// );

// // Log or handle the products as needed
// // console.log(products);
// const itemsPerPage = 9;
// const currentPage = ref(1);
// const totalPages = computed(() =>
//   Math.ceil(products.value.data.length / itemsPerPage)
// );

// const paginatedData = computed(() => {
//   const start = (currentPage.value - 1) * itemsPerPage;
//   const end = start + itemsPerPage;
//   return data.value.slice(start, end);
// });

// const changePage = (page) => {
//   if (page >= 1 && page <= totalPages.value) {
//     currentPage.value = page;
//   }
// };

const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "long",
    year: "numeric",
  });
};
</script>

<script>
export default {
  data() {
    return {
      items: [],
      itemsPerPage: 9,
      currentPage: 1,
      sortCriteria: "latest",
      currentCategory: "All Categories" || "",
    };
  },
  computed: {
    sliced() {
      return this.paginatedItems;
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    },
    paginatedItems() {
      const sortedItems = this.sortItems(this.items);
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return sortedItems.slice(start, end);
    },
  },
  methods: {
    async getCategory(elm) {
      this.currentCategory = elm; // Set the current category when a button is clicked
      let apiUrl;

      if (elm === "All Categories") {
        apiUrl = `${import.meta.env.VITE_API_URL}/api/articles`;
      } else {
        apiUrl = `${import.meta.env.VITE_API_URL}/api/articles?category=${elm}`;
      }

      try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        this.items = data.data; // Store the fetched data in items
      } catch (error) {
        console.error("Error fetching posts:", error);
      }
    },
    async sortBy(srt) {
      try {
        const response = await fetch(
          `${import.meta.env.VITE_API_URL}/api/articles`,
        );
        const data = await response.json();

        let sortedData;
        if (srt === "latest") {
          sortedData = data.data.sort(
            (a, b) => new Date(b.created_at) - new Date(a.created_at),
          );
        } else if (srt === "earliest") {
          sortedData = data.data.sort(
            (a, b) => new Date(a.created_at) - new Date(b.created_at),
          );
        } else if (srt === "aToZ") {
          sortedData = data.data.sort((a, b) => a.title.localeCompare(b.title));
        } else if (srt === "zToA") {
          sortedData = data.data.sort((a, b) => b.title.localeCompare(a.title));
        }
        this.items = sortedData;
      } catch (error) {
        console.error("Error fetching initial posts:", error);
      }
    },
    async fetchData(category) {
      if (category === null || category === undefined) {
        this.currentCategory = "All Categories";
      } else {
        this.currentCategory = category;
      }
      console.log(category);

      try {
        // Determine the URL based on whether a category is provided
        const url = category
          ? `${import.meta.env.VITE_API_URL}/api/articles?category=${category}`
          : `${import.meta.env.VITE_API_URL}/api/articles`;

        const response = await fetch(url);
        const data = await response.json();
        this.items = data.data;
        this.currentPage = 1;
      } catch (error) {
        console.error("Error fetching posts:", error);
      }
    },
    sortItems(items) {
      switch (this.sortCriteria) {
        case "latest":
          return items.sort(
            (a, b) => new Date(b.created_at) - new Date(a.created_at),
          );
        case "earliest":
          return items.sort(
            (a, b) => new Date(a.created_at) - new Date(b.created_at),
          );
        case "AtoZ":
          return items.sort((a, b) => a.title.localeCompare(b.title));
        case "ZtoA":
          return items.sort((a, b) => b.title.localeCompare(a.title));
        default:
          return items;
      }
    },
    setSortCriteria(criteria) {
      this.sortCriteria = criteria;
      this.currentPage = 1; // Reset to the first page after sorting
    },
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
      }
    },
    scrollToArticleSection() {
      this.$nextTick(() => {
        const section = document.getElementById("article-k-buzz");
        if (section) {
          section.scrollIntoView({ behavior: "smooth" });
        }
      });
    },
    async handleLinkClick(category) {
      await this.fetchData(category);
      this.scrollToArticleSection();
    },
  },
  created() {
    this.fetchData();
  },
  watch: {
    "$route.query.cat": {
      immediate: true,
      handler(newCategory) {
        this.fetchData(newCategory);
        this.scrollToArticleSection();
      },
    },
  },
  mounted() {
    const category = this.$route.query.cat || null;
    this.fetchData(category);
    this.scrollToArticleSection();
  },
};
</script>
<style>
.button-cat {
  border: 1px solid #ec1f29;
  border-radius: 50px;
  width: 100%;
  display: block;

  background: linear-gradient(to right, #ec1f29 50%, #ec1f2900 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

.button-cat:hover {
  background-position: left bottom;
}

.text-cat {
  text-align: center;
  font-size: 16px;
  transition: all 0.6s ease-out;
  display: block;
}

.text-cat:hover {
  color: white;
}

.img-wrapper {
  overflow: hidden;
}

.inner-img {
  transition: 0.3s;
}

.inner-img:hover {
  transform: scale(1.1);
}

.button-highlight {
  border-radius: 50px;
  display: block;
  background: linear-gradient(to right, #273a97 50%, #ec1f29 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

.button-highlight:hover {
  background-position: left bottom;
}

.text-highlight {
  text-align: center;
  font-size: 16px;
  color: white;
  transition: all 0.6s ease-out;
  display: block;
}

.text-highlight:hover {
  color: white;
}
</style>
