"use client";
import colors from "@/app/api-requests/colors";
import materials from "@/app/api-requests/materials";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Slider } from "@/components/ui/slider";
import { Color } from "@/modules/colors/colors";
import { Material } from "@/modules/materials/materials";
import { FilterBody } from "@/modules/products/Filter";
import { SubCategory } from "@/modules/sub-category/SubCategories";
import { RefreshCcw } from "lucide-react";
import { useState } from "react";
import SelectSortType from "./SelectSortType";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import { useRouter, useSearchParams } from "next/navigation";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";

type Props = {
  setFilterData: React.Dispatch<React.SetStateAction<FilterBody>>;
  filterData: FilterBody;
  maxPrice: number;
  minPrice: number;
  subCategories: SubCategory[];
};

const ProductsFilter = ({
  setFilterData,
  filterData,
  maxPrice,
  minPrice,
  subCategories,
}: Props) => {
  const [reset, setReset] = useState(false);
  const isFilterApplied = !!Object.keys(filterData).length;
  const router = useRouter();
  const { lang } = useCurrentLanguage();
  const searchParams = useSearchParams();

  const data = [
    {
      title: "Subsection",
      filterKey: "subcategoryId",
      items: subCategories || [],
    },
    {
      title: "colors",
      filterKey: "ColorId",
      items: colors() || [],
    },
    {
      title: "material",
      filterKey: "MatrialId",
      items: materials() || [],
    },
  ];

  // price range start
  // we can get the max and min price from the products data from props we don't need this call
  // const { maxPrice, minPrice } = getProducts()

  // price range end

  function handelChange(values: number[]): void {
    const min = values[0];
    const max = values[1];
    setFilterData((prev) => ({
      ...prev,
      maxPrice: max,
      minPrice: min,
    }));
  }
  function filterHandler(
    item: SubCategory | Color | Material,
    filterKey: string
  ) {
    const params = new URLSearchParams(searchParams.toString());
    filterKey === "subcategoryId" &&
      params.set("subcategoryId", item.id.toString());
    filterKey === "subcategoryId" &&
      router.replace(`?${params.toString()}`, { scroll: false });
    setFilterData((prev) => ({
      ...prev,
      [filterKey]: item.id,
      // resetPage: true,
    }));
  }

  return (
    <>
      <div className="flex justify-between items-center">
        <h3 className="font-bold w-fit relative after:absolute after:w-[90%] after:h-1 after:bg-gray-200 after:right-0 after:bottom-[-10px] mb-5">
          <TranslateClient text="filter" />
        </h3>
        <button
          onClick={() => {
            const params = new URLSearchParams(searchParams.toString());
            params.delete("subcategoryId");
            params.delete("categoryId");
            router.replace(`?${params.toString()}`, { scroll: false });
            setReset((prev) => !prev);
            setFilterData({ reset: true });
          }}
          className="hover:animate-spin"
          hidden={!isFilterApplied}
        >
          <RefreshCcw size={20} className="text-red-600" />
        </button>
      </div>

      <div>
        {/* products filter */}
        {data?.map((item, index) => (
          <Accordion key={index + 1} type="single" collapsible className="mb-3">
            <AccordionItem value="item-1">
              <AccordionTrigger>
                <TranslateClient text={item.title} />
              </AccordionTrigger>
              {item.items?.map((itemData) => (
                <AccordionContent
                  key={itemData?.id}
                  className={`flex items-center justify-between hover:text-mainBlue cursor-pointer duration-100 ${
                    // @ts-ignore
                    itemData.id === filterData[item.filterKey] &&
                    "!text-mainBlue"
                  }`}
                >
                  <button
                    onClick={() => filterHandler(itemData, item.filterKey)}
                  >
                    {itemData?.title?.[lang] || itemData?.name}
                  </button>
                </AccordionContent>
              ))}
            </AccordionItem>
          </Accordion>
        ))}
        {/* price filter */}
        <Accordion type="single" collapsible>
          <AccordionItem value="item-1">
            <AccordionTrigger>
              <TranslateClient text="price" />
            </AccordionTrigger>
            <AccordionContent className="py-16 rtl:dir-ltr ltr:dir-ltr">
              <Slider
                defaultValue={[minPrice, maxPrice]}
                min={minPrice}
                max={maxPrice}
                step={50}
                onValueCommit={handelChange}
              />
              <div className="flex justify-between mt-5">
                <span>SAR {minPrice}</span>
                <span>SAR {maxPrice}</span>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
        <div className="flex flex-col items-start">
          <h3 className="font-bold w-fit relative after:absolute after:w-[90%] after:h-1 after:bg-gray-200 after:right-0 after:bottom-[-10px] my-5">
            <TranslateClient text="order_by" />
          </h3>
          <SelectSortType setFilterData={setFilterData} reset={reset} />
        </div>
      </div>
    </>
  );
};

export default ProductsFilter;