"use client";

import { useTranslations } from "next-intl";
import SectionTitle from "../sectionTitle/SectionTitle";
import Tag from "../Tag";
import PropertyCard from "./PropertyCard";
import { useQuery } from "@tanstack/react-query";
import apiServiceCall from "@/lib/apiServiceCall";
import { useEffect, useState } from "react";
import ShimmerLoading from "./ShimmerLoading";
import { PropertyItem } from "@/types/property";

type LocaleContent = {
  name: string;
  description?: string;
};

type PropertiesGroup = {
  data: PropertyItem[];
};

type HomeData = {
  header?: {
    locales?: LocaleContent;
  };
  properties?: PropertiesGroup[];
};

type FeaturedSectionProps = {
  locale: string;
  homeData: HomeData;
};


const FeaturedSection = ({ locale, homeData }: FeaturedSectionProps) => {
  const t = useTranslations("FeaturedSection");
  const [activeCategoryId, setActiveCategoryId] = useState(2);

  const { data: categoriesData, isLoading: isCategoriesLoading } = useQuery({
    queryKey: ["categories"],
    queryFn: async () => {
      return apiServiceCall({
        url: `categories`,
        method: "GET",
        headers: {
          "Accept-language": locale,
        },
      });
    },
  });

  const featurPropertiesHeaders = homeData?.header?.locales;
  const featurarrayCards = homeData?.properties?.[0]?.data;

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

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

  return (
    <div
      id="featuredproparties"
      className="container mx-auto flex flex-col gap-6 px-2 sm:px-4 md:px-4 lg:px-[50px] xl:!px-[120px] 2xl:p-0"
    >
      <SectionTitle
        // title={t("Featured Properties")}
        title={featurPropertiesHeaders?.name}
        // description={t("explore")}
        description={featurPropertiesHeaders?.description}
      />
      <div className="flex flex-col md:flex-row md:justify-center lg:justify-start gap-5">
        {/* <Tag
            title={t("Off Plan")}
            classNameWrapper={"!bg-primary2"}
            classNameChild={"!text-primary !font-normal "}
          />
          <Tag title={t("Ready to Move")} /> */}

        {categoriesData?.data?.map((item : any) => (
          <Tag
            key={item.id}
            id={item?.id}
            activeId={activeCategoryId}
            setActiveId={setActiveCategoryId}
            title={item?.locales?.name}
          />
        ))}
      </div>

      {filterWithCategoriesLoading ? (
        <ShimmerLoading />
      ) : (
        <div className="grid xl:grid-cols-3 md:grid-cols-2  gap-6">
          {(filterWithCategoriesData || featurarrayCards)?.map((item : any) => (
            <PropertyCard key={item.id} item={item} />
          ))}
        </div>
      )}
    </div>
  );
};

export default FeaturedSection;