"use client";
import { columns } from "@/components/admin/categories/categoriesColumns";
import { DataTable } from "./DataTable";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { FaPlus } from "react-icons/fa6";
import { useRouter } from "next/navigation";

const CategoriesClient = () => {
  const router = useRouter();
  const [categories, setCategories] = useState<CategoryType[]>([]);
  const [filteredCategories, setFilteredCategories] = useState<CategoryType[]>(
    []
  );

  const fetchCategories = async () => {
    try {
      const response = await fetch("/api/admin/categories", {
        method: "GET",
      });
      const data = await response.json();
      // console.log("FetchCategories: ", data.data);
      setCategories(data.data);
      setFilteredCategories(data.data);
    } catch (err) {
      console.log("[Categories_GET]", err);
    }
  };

  const handleFilter = (e: React.ChangeEvent<HTMLSelectElement>) => {
    e.preventDefault();

    const filter = e.target.value;

    if (filter === "all") {
      setFilteredCategories(categories);
    } else if (filter === "main") {
      const mainCategories = categories.filter(
        (category: { category_type: string }) =>
          category.category_type === "MAIN_CATEGORY"
      );
      setFilteredCategories(mainCategories);
    } else if (filter === "sub") {
      const subCategories = categories.filter(
        (category: { category_type: string }) =>
          category.category_type === "SUB_CATEGORY"
      );
      setFilteredCategories(subCategories);
    } else {
      const subSubCategories = categories.filter(
        (category: { category_type: string }) =>
          category.category_type === "SUB_SUB_CATEGORY"
      );
      setFilteredCategories(subSubCategories);
    }
  };

  useEffect(() => {
    fetchCategories();
  }, []);

  return (
    <div className="space-y-6 pt-5 px-2">
      <div className="flex items-center justify-between">
        <h1 className="text-3xl font-bold tracking-tight">Categories</h1>
        <Button
          className="bg-primary hover:bg-secondary text-white max-sm:text-[12px] max-sm:w-[150px]"
          onClick={() => router.push("")}
        >
          <FaPlus className="h-4 w-4 mr-2 max-sm:h-3 max-sm:w-3" />
        </Button>
      </div>
      <div>
        <h3 className="py-2">Filter</h3>
        <select onChange={handleFilter} className="border py-1 px-2" id="">
          <option value="all">All</option>
          <option value="main">Main Category</option>
          <option value="sub">Sub Category</option>
          <option value="subSub">Sub Sub Category</option>
        </select>
      </div>

      {/* <div className="space-y-6 pt-5 px-2">
       <div className="flex items-center justify-between">
         <h1 className="text-3xl font-bold tracking-tight">Categories</h1>
       </div> */}
      <DataTable
        columns={columns}
        data={filteredCategories}
        searchKey="name"
        showingRow={5}
      />
    </div>
  );
};

export default CategoriesClient;