"use client";
import Image from "next/image";
import img1 from "../../../public/assets/home/img11.webp";
import arrow from "../../../public/assets/icons/arrow-right.svg";
import SectionTitle from "../sectionTitle/SectionTitle";
import Tag from "../Tag";
import React, { useEffect, useRef, useState } from "react";

import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import { useTranslations } from "next-intl";
import Link from "next/link";
import { useQuery } from "@tanstack/react-query";
import apiServiceCall from "@/lib/apiServiceCall";
import SpinerLoading from "../reusableComponent/SpinerLoading";
import ShimmerLoading from "./ShimmerLoading";
const PopularSection = ({ homeData, locale } : any) => {
  const [activeCityId, setActiveCityId] = useState(1);
  const { data: citiesData, isLoading: isCitiesLoading } = useQuery({
    queryKey: ["cities"],
    queryFn: async () => {
      return apiServiceCall({
        url: `cities`,
        method: "GET",
        headers: {
          "Accept-language": locale,
        },
      });
    },
  });

  const {
    data: filterWithCitiesData,
    refetch,
    isFetching: filterWithCitiesLoading,
  } = useQuery({
    queryKey: ["filter-with-cities"],
    queryFn: async () => {
      return apiServiceCall({
        url: `filter?city_id=${activeCityId}&per_page=6`,
        method: "GET",
        headers: {
          "Accept-language": locale,
        },
      });
    },
    select: (data) => data?.data,
    enabled: !!activeCityId,
  });

  useEffect(() => {
    refetch();
  }, [activeCityId]);

  const PopulatHeaders = homeData?.header?.locales;

  const popularBottons = homeData?.properties;
  const popularProps = homeData?.properties[0]?.data;
  const t = useTranslations("PopularSection");

  return (
    <>
      <div
        id="popularareas"
        className="  container mx-auto flex flex-col gap-6 px-2 sm:px-4 md:px-[35px] lg:px-[50px] xl:!px-[120px] 2xl:p-0"
        data-aos="fade-up"
        data-aos-duration="1500"
        data-aos-delay="100"
      >
        <SectionTitle
          // title={t("POPULAR AREAS")}
          title={PopulatHeaders?.name}
          // description={t("discover")}
          description={PopulatHeaders?.description}
        />
        <div className="flex flex-col gap-12">
          {/* <div className="flex flex-col sm:flex-row sm:justify-center lg:justify-start gap-2 md:gap-5">
            <Tag
              title={t("Dubai")}
              classNameWrapper="!bg-primary2"
              classNameChild="!text-primary !font-normal"
            />
            <Tag title={t("Abu Dhabi")} />
            <Tag title={t("Sharjah")} />
          </div> */}
          <div className="container mx-auto flex flex-col md:flex-row sm:justify-center lg:justify-center items-center gap-2 md:gap-5 ">
           
              <Swiper
                loop={true}
                spaceBetween={5}
                breakpoints={{
                  320: {
                    slidesPerView: 1.5,
                  },
                  640: {
                    slidesPerView: 2.5,
                  },
                  768: {
                    slidesPerView: 3,
                  },
                  1024: {
                    slidesPerView: 4,
                  },
                }}
                slidesPerView={4}
                dir="ltr"
                className="mySwiper !w-full"
              >
                {citiesData?.data?.map((item: any) => (
                  <SwiperSlide key={item?.id} className="w-full">
                    <Tag
                      activeId={activeCityId}
                      setActiveId={setActiveCityId}
                      classNameWrapper="!w-full"
                      // data={item?.locales?.name}
                      // title={item?.city?.locales?.name}
                      title={item?.locales?.name}
                      id={item?.id}
                      // title={t("Dubai")}
                      // classNameWrapper="!bg-primary2"
                      // classNameChild="!text-primary !font-normal"
                    />
                  </SwiperSlide>
                ))}
              </Swiper>
          </div>
          {filterWithCitiesLoading ? (
            <ShimmerLoading />
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 ">
              {(filterWithCitiesData || popularProps)?.map((item : any) => (
                <div
                  key={item?.id}
                  className=" w-full md:h-[370px] lg:h-[400px] rounded-[16px] overflow-hidden group relative shadow-[0px_32px_32px_0px_rgba(156,156,156,0.10)]"
               
                >
                  <div
                    className="flex flex-col p-4 
                 rounded-2xl gap-2
                lg:gap-4"
                  >
                    <Image
                      src={item?.image?.image ?? img1}
                      alt="img1"
                      className="object-cover w-full h-[268px] group-hover:h-[200px] rounded-[12px] transition-all duration-500 ease-in-out"
                      width={600}
                      height={500}
                      loading="lazy"
                      quality={70}
                    />
                    <span className="text-dark md:text-[18px] lg:text-[24px] font-normal line-clamp-1">
                      {item?.locales?.name}
                    </span>

                    <p className=" hidden group-hover:block overflow-hidden group-hover:h-[48px] inset-0 opacity-0 group-hover:opacity-100 transition-opacity text-paragraph line-clamp-2 transition-all duration-500 ease-in-out">
                      {item?.locales?.short_description}
                    </p>
                    <div
                      className={`text-primary md:text-[14px] lg:text-[20px] font-light flex items-center gap-1`}
                    >
                      <Link href={`/${locale}/properties/${item?.slug}`}>
                        {t("View Properties")}
                      </Link>

                      <Image
                        src={arrow}
                        alt="arrow"
                        className={`object-cover w-[19px] h-[19px] lg:w-[24px] lg:h-[24px] transition-transform duration-300 ${
                          locale === "ar" ? "rotate-180" : ""
                        }`}
                      />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default PopularSection;