import React, { FC, useContext, useEffect, useState } from "react";
import styles from "./categoriesBreadcrumPage.module.scss";
import * as CategoryAPI from "../../pages/api/categories";
import { Row, Col, Card, Spin } from "antd";
import Router, { useRouter } from "next/router";
import { SettingFilled,ArrowRightOutlined } from "@ant-design/icons";
import shopConetxt from "../../context/shopConetxt";
import { createBreadcrumb, getFlattenCategory } from "../globalUtils/utils";
import cx from "classnames";
import { baseUrl, defaultImg } from "../../constants/urls";

export const categoriesBreadcrumPage: FC<any> = ({categories,selectBreadcrumbItem}) => {
  // const [categories, setcategories] = useState<any>({ children: {} });
  const { Meta } = Card;
  const router = useRouter();
  const [isDataLoading, setIsDataLoading] = useState(true);
  const antIcon = <SettingFilled style={{ fontSize: 24 }} spin />;
  const { setCategoryBreadcrumb, categoryTreeNested } = useContext(shopConetxt);

  // useEffect(() => {
  //   if (router.query.id)
  //   breadCrumbLoad(router.query.id);
  // }, []);

  // const breadCrumbLoad=(id:any)=>{
  //   CategoryAPI.fetchForCatgoriesPage({
  //     categoryId: id,
  //     page: 1,
  //     pageLimit: 30,
  //   }).then((res) => {
  //     console.log(res,"res");
      
  //     if (Array.isArray(res) && res.length)
  //       if (res[0].children) setcategories(res[0].children);
  //       else setcategories(res);

  //     setIsDataLoading(false);
  //   });
  // }
  // const selectBreadcrumbItem = (id: any, categoryName: string,file:any) => {
   
    
  //   if(file?.children?.length>0){
  //     setcategories(file.children);
      
  //     const flattenCategory = getFlattenCategory(categoryTreeNested);
  //     const breadCrumbData = createBreadcrumb(id, flattenCategory);
  //     setCategoryBreadcrumb(breadCrumbData);
  //   }else{
  //   const routerObject: any = { ...router.query };
  //   routerObject.id = id;
  //   routerObject.cateName = categoryName;

  //   const flattenCategory = getFlattenCategory(categoryTreeNested);
  //   const breadCrumbData = createBreadcrumb(id, flattenCategory);
  //   setCategoryBreadcrumb(breadCrumbData);

  //   const result = "?" + new URLSearchParams(routerObject).toString();
  //   Router.push(`/products/${id}${result}`);
  //   }
  // };

  
  return (
    <>
      <div className={styles.divTitle}>
        <h2 className={cx("sectionSubTitle",styles.divTitleText)}>CATEGORIES</h2>
        <a>View All Products</a>
      </div>
     
      <div style={{ margin: "1em 2.5em" }}>
        <div className={styles.categoryMain}>
          {Array.isArray(categories) &&
            categories.map((cat: any) => {
              console.log(cat.name,"name");
              
              return (
                <React.Fragment key={cat.category_id}>
                  
                  <div onClick={() =>
                        selectBreadcrumbItem(cat.category_id, cat.name,cat)
                      }>
  
                      <div  className="flex p-2">
                      <div className={styles.categoryImg}>
                      <img
                          src={cat.logo===null?`${defaultImg}`:`${baseUrl}/cache/small/${cat.logo}`}
                          className={styles.imgDisplay}
                          alt=""
                        />
                      </div>
                      <div className={styles.textContainer}>
                        <div className={styles.text}>{cat.name}</div>
                          <div className="flex items-center mt-4">
                              <div className={styles.circleArrow}>
                              <ArrowRightOutlined className={styles.iconColor} />
                              </div>
                              <div className={styles.exploreText}>Explore Products</div>
                          </div>

                      </div>
                      </div>
                    
                  </div>
                    {/* <Card
                      hoverable
                      style={{ maxWidth: "17.5em", margin: "1em 0.8em" }}
                      cover={
                        <img
                          src={`https://sparts.in/${cat.logo}`}
                          // src="https://sparts.in/vendor/webkul/ui/assets/images/product/large-product-placeholder.webp"
                          alt=""
                        />
                      }
                      onClick={() =>
                        selectBreadcrumbItem(cat.category_id, cat.name,cat)
                      }
                    >
                      <Meta title={cat.name} />
                    </Card> */}
                  
                </React.Fragment>
              );
            })}
        </div>
      </div>
    </>
  );
};

export default categoriesBreadcrumPage;