<template>
  <div data-aos="fade-right" id="hosea-section" class="container mx-5 mb-5 w-auto relative z-10">
    <!-- Categories Mobile -->
    <li class="lg:hidden block dropdown list-none">
      <div @click="toggleDropdown" class="dropdown-button flex">
        {{ selectedCity ? selectedCity : translate("All City") }}
        <img :src="imageSrc" :style="{ transform: `rotate(${rotate}deg)` }" class="rotate-image w-3 ml-2" />
      </div>
      <ul v-if="isOpen" class="dropdown-menu z-10 list-none">
        <li class="list-none">
          <a class="block px-6 py-1 hover:text-[#EC2029]" @click="handleCityClick('All City')">
            {{ translate("All City") }}
          </a>
        </li>
        <li class="list-none" v-for="item in city.data" :key="item.id">
          <a class="block px-6 py-1 hover:text-[#EC2029]" @click="handleCityClick(item.city_name)">
            {{ item.city_name }}
          </a>
        </li>
      </ul>
    </li>
  </div>

  <!-- Category City Desktop -->
  <div data-aos="fade-up" id="hosea-section" class="lg:flex hidden items-center justify-center px-6 py-4 mt-12 mx-auto">
    <div class="lg:flex space-x-4 py-5">
      <!-- "All City" Button -->
      <div @click="handleCityClick('All City')" class="outer cursor-pointer">
        <div :class="['relative border border-[#EC2029] px-6 rounded-full transition-all duration-300', currentCategory === 'All City' ? 'bg-[#EC2029] text-white' : 'button-cat']">
          <div class="text-cat">{{ translate("All City") }}</div>
        </div>
      </div>

      <!-- City Buttons -->
      <div v-for="item in city.data" :key="item.id">
        <div @click="handleCityClick(item.city_name)" class="outer cursor-pointer">
          <div :class="['relative border border-[#EC2029] px-6 rounded-full transition-all duration-300', currentCategory === item.city_name ? 'bg-[#EC2029] text-white' : 'button-cat']">
            <div class="text-cat">{{ item.city_name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Category City Desktop -->
  <div class="px-5 items-center justify-center">
    <div data-aos="fade-in" v-if="filteredItems.length > 0">
      <div class="grid lg:grid-cols-3 grid-cols-1 md:grid-cols-2 gap-8 mb-6">
        <div v-for="item in paginatedItems" :key="item.id">
          <div class="relative group group-hosea bg-white p-5 rounded-[30px] shadow-xl" style="box-shadow: 0px 8px 20px #0000001f">
            <div class="absolute z-10 right-8 top-8">
              <div v-if="item.event === 1">
                <div class="flex bg-[#FFD5D5] bg-opacity-60 rounded-[30px] px-4 py-1">
                  <img :src="'/icon/calendar-check.svg'" alt="Calendar Check Icon" />
                  <p class="text-[#EC1F29] text-[12px] ml-2">Event on Going</p>
                </div>
              </div>
            </div>
            <div>
              <div class="relative 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="item.thumbnail" :alt="item.store_name" />
              </div>
            </div>

            <div class="mt-5 leading-8">
              <div class="flex items-center space-x-2 mb-2">
                <img src="/icon/icon-loc.svg" class="" />
                <p class="text-[#959595] text-sm">
                  {{ item.city }}
                </p>
              </div>
              <p class="text-hosea text-xl font-bold text-[#131313]">
                {{ item.store_name }}
              </p>

              <div class="flex items-center justify-between mt-6">
                <NuxtLink :to="'/articles/' + item.slug" class="button-highlight relative bg-[#EC2029] text-white rounded-full lg:px-8 lg:py-3 md:px-8 lg:px-8 lg:py-3 md:py-3 px-6 py-2">
                  <div class="text-highlight text-sm">
                    {{ translate("See Details") }}
                  </div>
                </NuxtLink>
                <NuxtLink :to="item.maps_links" target="_blank">
                  <div class="flex items-center space-x-2">
                    <img src="/icon/icon-map.png" class="" />
                    <p class="text-[#16256E] text-sm">
                      {{ translate("Open Map") }}
                    </p>
                  </div>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-aos="fade-in" v-else>Data Not Found</div>

    <!-- Pagination Controls -->
    <div data-aos="fade-in" class="flex items-center justify-center space-x-2 py-10">
      <div @click="changePage(currentPage - 1)" :disabled="currentPage === 1" class="button-highlight relative bg-[#EC2029] text-white rounded-full py-[8px] px-[4px]">
        <div class="text-highlight items-center">
          <img src="/icon/icon_slide_right.svg" class="rotate-180 h-5 w-5" />
        </div>
      </div>

      <!-- Page Numbers -->
      <span v-for="page in totalPages" :key="page" @click="changePage(page)" class="cursor-pointer px-3 py-1 rounded-full" :class="page === currentPage ? 'text-[#16256E] font-bold' : 'text-gray-700 hover:bg-gray-200'">
        {{ page }}
      </span>

      <div @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages" class="button-highlight relative bg-[#EC2029] text-white rounded-full mr-6 py-[8px] px-[4px]">
        <div class="text-highlight items-center">
          <img src="/icon/icon_slide_right.svg" class="h-5 w-5" />
        </div>
      </div>
    </div>
  </div>

  <section class="image-grid-section lg:mt:20 md:mt-10 mt-8">
    <!-- <SectionConnectWithUs /> -->
    <div class="container mx-auto">
      <div class="grid lg:grid-cols-4 md:grid-cols-2 bg-[#fff] lg:py-20 py-10 lg:gap-5 md:gap-8 gap-5 lg:px-10 md:px-10 px-5">
        <div data-aos="fade-right" class="image-item aspect-[1/1] object-cover rounded-xl hover-scale">
          <img src="/images/img_connect_1.webp" alt="Food Image 1" class="w-full h-full object-cover rounded-xl" loading="lazy" />
        </div>
        <div data-aos="fade-right" class="image-item aspect-[1/1] object-cover rounded-xl hover-scale">
          <img src="/images/img_connect_2.webp" alt="Food Image 2" class="w-full h-full object-cover rounded-xl" loading="lazy" />
        </div>
        <div data-aos="fade-right" class="image-item aspect-[1/1] object-cover rounded-xl hover-scale">
          <img src="/images/img_connect_3.webp" alt="Food Image 3" class="w-full h-full object-cover rounded-xl" loading="lazy" />
        </div>
        <div style="overflow-x: hidden" class="image-item align-center self-center justify-between">
          <div data-aos="fade-left">
            <div class="flex items-center space-x-2">
              <p class="lg:text-3xl md:text-2xl text-xl font-bold">
                {{ translate("Connect with us on social media") }}
              </p>
            </div>
            <p class="lg:text-base md:text-lg text-sm text-[#959595] mt-3">
              {{ translate("Stay updated to our new products, promos, events, and many more.") }}
            </p>
            <div class="flex mt-10 items-center justify-between">
              <div class="flex text-white">
                <a href="https://www.tiktok.com/@arirang.taste" target="_blank" class="flex group cursor-pointer bg-[#000000] text-center rounded-full items-center px-[10px] md:py-[8px] py-[10px] mr-2">
                  <img :src="'/icon/tiktok_logo.svg'" alt="Tiktok" class="w-5 h-5" />
                  <p class="hidden md:block w-0 opacity-0 lg:group-hover:opacity-100 lg:group-hover:w-16 transition-all duration-300 ease-in-out">Tiktok</p>
                </a>
                <a href="https://www.youtube.com/channel/UCULijpXxRqM-JuwLHOpQ8yw" target="_blank" class="flex group cursor-pointer bg-[#E22C45] rounded-full items-center px-[10px] md:py-[8px] py-[10px] mr-2">
                  <img src="/icon/yt_logo.svg" class="w-5 h-5" alt="YouTube" />
                  <p class="hidden md:block w-0 opacity-0 lg:group-hover:ml-2 lg:group-hover:opacity-100 lg:group-hover:w-16 transition-all duration-300 ease-in-out">YouTube</p>
                </a>
                <a href="https://www.instagram.com/arirang.taste" target="_blank" class="flex group cursor-pointer bg-[#363636] text-center rounded-full items-center px-[10px] md:py-[8px] py-[10px]">
                  <img src="/icon/ig_connect_logo.svg" alt="Instagram" class="w-5 h-5" />
                  <p class="hidden md:block w-0 opacity-0 lg:group-hover:opacity-100 lg:group-hover:w-20 transition-all duration-300 ease-in-out">Instagram</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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

const languageStore = useLanguageStore;

const { data: city } = await useFetch(appConfig.api.url + "/api/city", {
  method: "GET",
});

function translate(params) {
  return languageStore().translateWords(params);
}

const isOpen = ref(false);
const rotate = ref(0);
const selectedCity = ref(null);
const currentCategory = ref("All City");
const currentPage = ref(1);
const itemsPerPage = 12; // Number of items to display per page

const toggleDropdown = () => {
  isOpen.value = !isOpen.value;
  rotate.value = (rotate.value + 180) % 360;
};

const selectCity = (cityName) => {
  selectedCity.value = cityName;
  isOpen.value = false;
  currentCategory.value = cityName;
};

const imageSrc = "/icon/icon_dropdown_sort.svg";

const handleCityClick = (cityName) => {
  if (cityName === "All City") {
    selectedCity.value = null;
    isOpen.value = false;
    currentCategory.value = "All City";
    fetchData(); // Fetch all items
  } else {
    selectedCity.value = cityName;
    isOpen.value = false;
    currentCategory.value = cityName;
    fetchData(cityName); // Fetch items for the selected city
  }
};

const items = ref([]);

async function fetchData(cityName = "") {
  let url = cityName ? `${import.meta.env.VITE_API_URL}/api/hosea?city=${cityName}` : `${import.meta.env.VITE_API_URL}/api/hosea`;
  try {
    const response = await fetch(url);
    const data = await response.json();
    items.value = data.data;
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

// Compute filtered items based on selected city
const filteredItems = computed(() => {
  if (!selectedCity.value) {
    return items.value;
  }
  return items.value.filter((item) => item.city === selectedCity.value);
});

// Pagination logic
const totalPages = computed(() => Math.ceil(filteredItems.value.length / itemsPerPage));

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

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

  // Scroll to the hosea-section
  const hoseaSection = document.getElementById("hosea-section");
  if (hoseaSection) {
    hoseaSection.scrollIntoView({ behavior: "smooth" });
  }
};

fetchData();
</script>

<style>
.dropdown-button {
  border: none;
  cursor: pointer;
}

.dropdown-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 30px;
  position: absolute;
}

.dropdown-menu li {
  padding: 5px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  color: #ef5350;
}
.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;
  color: white;
  transition: all 0.6s ease-out;
  display: block;
}

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

.group-hosea {
  &:hover {
    transition: all 1s;
    & .text-hosea {
      color: #16256e;
    }
    & .inner-img {
      transform: scale(1.1);
    }
    & .button-highlight {
      background-position: left bottom;
    }
  }
}
</style>
