import React from "react";
import "./CategorySidebar.css";
import { FaMinus, FaPlus } from "react-icons/fa";
import { useRouter } from "next/navigation";

const CategorySidebar = ({
  category,
  subcategories,
  childCategories,
  brands,
  brandId,
  openCategory,
  setOpenCategory,
  expandedCategory,
  setExpandedCategory,
  expandedSubCategory,
  setExpandedSubCategory,
  dispatch,
  getAllSubCategory,
  handleSubCategoryClick,
  setSelectedCategoryId,
  openBrand,
  setOpenBrand,
  categoryId,
  subcategoryId,
  childCategoryId,
}) => {
  const router = useRouter();

  return (
    <div className="category_sidebar">
      <>
        <div
          className="category_header"
          onClick={() =>
            setOpenCategory(openCategory === "main" ? null : "main")
          }
        >
          <span>Categories</span>
          {openCategory === "main" ? <FaMinus /> : <FaPlus />}
        </div>
        {openCategory === "main" && (
          <div className="category_list">
            {category?.map((item) => (
              <div
                key={item.id}
                className={
                  expandedCategory === item.id ? "active_category" : ""
                }
              >
                {/* Category */}
                <div
                  // className={`category_item `}
                  className={`category_item ${
                    Number(categoryId) === item.id ? "active_category" : ""
                  }`}
                  onClick={() => {
                    router.push(`/shop?category_id=${item.id}`);

                    setSelectedCategoryId(item.id);

                    dispatch(
                      getAllSubCategory({
                        category_id: item.id,
                      }),
                    );

                    setExpandedCategory(
                      expandedCategory === item.id ? null : item.id,
                    );

                    setExpandedSubCategory(null);
                  }}
                >
                  <span>{item.name}</span>

                  {expandedCategory === item.id ? <FaMinus /> : <FaPlus />}
                </div>

                {/* Subcategories */}
                {expandedCategory === item.id && (
                  <div className="subcategory_list">
                    {subcategories?.map((sub) => (
                      <div key={sub.id}>
                        <div
                          // className="subcategory_item"
                          className={`subcategory_item ${
                            Number(subcategoryId) === sub.id
                              ? "active_subcategory"
                              : ""
                          }`}
                          onClick={() => {
                            router.push(
                              `/shop?category_id=${item.id}&subcategory_id=${sub.id}`,
                            );

                            handleSubCategoryClick(item.id, sub.id);

                            setExpandedSubCategory(
                              expandedSubCategory === sub.id ? null : sub.id,
                            );
                          }}
                        >
                          <span>{sub.name}</span>

                          {expandedSubCategory === sub.id ? (
                            <FaMinus />
                          ) : (
                            <FaPlus />
                          )}
                        </div>

                        {expandedSubCategory === sub.id &&
                          childCategories?.length > 0 && (
                            <div className="childcategory_list">
                              {/* {childCategories.map((child) => (
                                <div
                                  key={child.id}
                                  // className="childcategory_item"
                                  className={`childcategory_item ${
                                    Number(childCategoryId) === child.id
                                      ? "active_child"
                                      : ""
                                  }`}
                                >
                                  {child.name}
                                </div>
                              ))} */}

                              {/* new */}

                              {childCategories.map((child) => (
                                <div
                                  key={child.id}
                                  className={`childcategory_item ${
                                    Number(childCategoryId) === child.id
                                      ? "active_child"
                                      : ""
                                  }`}
                                  onClick={() => {
                                    router.push(
                                      `/shop?category_id=${item.id}&subcategory_id=${sub.id}&childcategory_id=${child.id}`,
                                    );
                                  }}
                                >
                                  {child.name}
                                </div>
                              ))}
                            </div>
                          )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}{" "}
        <div className="brand_section">
          <div
            className="category_header"
            onClick={() => setOpenBrand(openBrand === "brand" ? null : "brand")}
          >
            <span>Brands</span>{" "}
            {openBrand === "brand" ? <FaMinus /> : <FaPlus />}
          </div>

          {openBrand === "brand" && (
            <div className="category_list">
              {brands?.length > 0 ? (
                brands.map((brand) => (
                  <div
                    key={brand.id}
                    className={`category_item ${
                      Number(brandId) === brand.id ? "active_brand" : ""
                    }`}
                    onClick={() => {
                      router.push(
                        `/shop?category_id=${categoryId || ""}&subcategory_id=${
                          subcategoryId || ""
                        }&childcategory_id=${
                          childCategoryId || ""
                        }&brand_id=${brand.id}`,
                      );
                    }}
                  >
                    {brand.name}
                  </div>
                ))
              ) : (
                <div className="brand_item">No Brands</div>
              )}
            </div>
          )}
        </div>
      </>
    </div>
  );
};

export default CategorySidebar;
