import fetchData from "@/api/fetch-data";
import CountdownTimer from "@/app/ui/home/CountdownTimer";
import CustomBreadcrumb from "@/app/ui/shared/CustomBreadcrumb";
import { getLocale, getTranslations } from "next-intl/server";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import ProductsLayout from "@/app/ui/products/ProductsLayout";
import Filter from "@/app/ui/products/Filter";
import FilterSheet from "@/app/ui/products/FilterSheet";

export default async function Page({ params }) {
  const locale = await getLocale();
  const o = await getTranslations("offers");
  let offerData = [];
  let code;
  let filter1 = [];
  let filter2 = [];
  let products = [];

  const response = await fetchData({
    endPoint: `/offers/products/${params.id}`,
    locale
  });

  if (!response?.error) {
    if (response?.status == "success") {
      if (response?.data?.off_Data?.code == "oneFree") {
        offerData = response?.data?.off_Data;
        const { data } = response;
        filter1 = data.filter1;
        filter2 = data.filter2;
        code = response?.data?.off_Data?.code;
      } else if (response?.data?.off_Data?.code == "duration") {
        offerData = response?.data?.off_Data;
        const { data } = response;
        products = data?.arr?.durationFilter;
        code = response?.data?.off_Data?.code;
      } else if (response?.data?.off_Data?.code == "extra") {
        offerData = response?.data?.off_Data;
        const { data } = response;
        products = data?.filter1;
        code = response?.data?.off_Data?.code;
      }
    }
  }

  return (
    <>
      <CustomBreadcrumb
        title={locale == "en" ? offerData?.title?.en : offerData?.title?.ar}
        route={locale == "en" ? offerData?.title?.en : offerData?.title?.ar}
        subs={true}
      />
      {code == "oneFree" && (
        <section className="container my-6 space-y-6">
          <CountdownTimer date={offerData?.end_date} />
          <Tabs defaultValue="filter1" className="w-full" dir={locale == "en" ? "ltr" : "rtl"}>
            <TabsList className="px-0 mb-6 bg-transparent border-b border-gray-400 rounded-none w-full justify-start">
              <TabsTrigger
                value="filter1"
                className="lg:px-12 md:text-base text-sm data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-main data-[state=active]:rounded-none"
              >
                {o('buy')}
              </TabsTrigger>
              <TabsTrigger
                value="filter2"
                className="lg:px-12 md:text-base text-sm data-[state=active]:bg-transparent data-[state=active]:shadow-none data-[state=active]:border-b-2 data-[state=active]:border-main data-[state=active]:rounded-none"
              >
                {o('get')}
              </TabsTrigger>
            </TabsList>
            <TabsContent value="filter1">
              <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12 block md:hidden">
                  <FilterSheet filters={filter1} />
                </div>
                <div className="lg:col-span-2 md:col-span-4 hidden md:block">
                  <Filter filters={filter1} />
                </div>
                <div className="lg:col-span-10 md:col-span-8 col-span-12">
                  <ProductsLayout data={filter1} />
                </div>
              </div>
            </TabsContent>
            <TabsContent value="filter2">
              <div className="grid grid-cols-12 gap-6">
                <div className="col-span-12 block md:hidden">
                  <FilterSheet filters={filter2} />
                </div>
                <div className="lg:col-span-2 md:col-span-4 hidden md:block">
                  <Filter filters={filter2} />
                </div>
                <div className="lg:col-span-10 md:col-span-8 col-span-12">
                  <ProductsLayout data={filter2} />
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </section>
      )}
      {code == "duration" && (
        <section className="container my-6 space-y-6">
          <CountdownTimer date={offerData?.end_date} />
          <div className="grid grid-cols-12 gap-6">
            <div className="col-span-12 block md:hidden">
              <FilterSheet filters={products} />
            </div>
            <div className="lg:col-span-2 md:col-span-4 hidden md:block">
              <Filter filters={products} />
            </div>
            <div className="lg:col-span-10 md:col-span-8 col-span-12">
              <ProductsLayout data={products} />
            </div>
          </div>
        </section>
      )}
      {code == "extra" && (
        <section className="container my-6 space-y-6">
          <CountdownTimer date={offerData?.end_date} />
          <div className="grid grid-cols-12 gap-6">
            <div className="col-span-12 block md:hidden">
              <FilterSheet filters={products} />
            </div>
            <div className="lg:col-span-2 md:col-span-4 hidden md:block">
              <Filter filters={products} />
            </div>
            <div className="lg:col-span-10 md:col-span-8 col-span-12">
              <ProductsLayout data={products} />
            </div>
          </div>
        </section>
      )}
    </>
  );
}
