import styles from "./MegaMenu.module.scss";
import List from "./List";
import { FC, useEffect, useState } from "react";
import Details from "./Details";
import { Image } from "antd";
import cx from "classnames";

const blk = styles.megamenu;

const MegaMenu: FC<any> = ({ selectedCat, dataTree, brandList,category,categoryTree,page }: any): any => {
  // const [category, setCategory] = useState([]);
  const { name } = selectedCat;
  const [selectedSubMenu, setSelectedSubMenu] = useState([]);
  // const [categoryTree, setCategoryTree] = useState([]);
  const [cateName, setCatName] = useState("");
  const [selectedItem, setSelectedItem] = useState("");
  const [subCat, setSubCat] = useState<any>({});
  const [brandLists, setBrandLists] = useState<any>({});

  const handleMenuChange = (menu: any) => {
 
    setSelectedSubMenu(menu?.children);
    setCatName(menu?.name);
    
  };

  useEffect(() => {
    setSubCat(dataTree);
    // CategoryAPI.fetchCategory().then((res) => {
    //   setCategory(res);
    // });
    // CategoryAPI.fetchCategoryTree().then((res) => {
    //   setCategoryTree(res.categories);
    // });
    // CategoryAPI.brandsList().then((res) => {
    //   setBrandLists(res);
    // });
    setSelectedItem(name);
  }, [selectedCat]);

  const onMenuSelctionChange = (evt: any) => {
    
    const menuName = evt.target.innerText;

    if(menuName==selectedItem){
      setSelectedItem(menuName);
    }else{
      
    setSelectedItem(menuName);
   
    // console.log(categoryTree,"categoryTree")
    
    categoryTree.forEach((element: any) => {
       if (element.name == menuName) {
        // console.log(menuName,"menuName");
        // console.log(element.name,"element.name")
        setSubCat(element);
        setSelectedSubMenu([]);
       
         setCatName("");
       }
    });
  }
  };

  return (
    <div className={`${styles.megamenu}`}>
      <div className={cx("groups", styles.categoryImgCard)}>
        {category?.map((cat: any, i:number) => {
          
          const img =
            cat.image === null && cat.image_url === null
              ? cat.category_icon_path
              : cat.image;

          return (
            <div
              className={cx(styles.categoryCard, `cursor-pointer`)}
              key={i}
              // onMouseEnter={showModal(cat)}
              // onMouseOver={showModal(cat)}
              //  onClick={showModal(cat)}
              style={{
                background: selectedItem === cat.name ? " #291C61" : "",
              }}
             
              onClick={onMenuSelctionChange}
            >
              <div className={styles.imgDiv}>
                <Image
                  preview={false}
                  src={`${cat.category_icon_url}`}
                  className={styles.imageDisplay}
                  height={35}
                  width={35}
                />
              </div>
              <a
                className={styles.categoryText}
                style={{ color: selectedItem === cat.name ? "#FFFFFF" : "" }}
              >
                {cat.name}
              </a>
            </div>

            // <CategoryCard {...cat} key={i} showModal={showModal} />
          );
        })}
      </div>

      {subCat.children ? (
        <>
          <div className={`${styles.megamenu__list}`}>
            <List
              menu={subCat.children || []}
              onMenuChange={handleMenuChange}
              page={page}
            />
          </div>
          <div className={`${styles.megamenu__details}`}>
            <Details
              selectedSubMenu={selectedSubMenu || []}
              name={cateName}
              brandList={brandList}
            />
          </div>
        </>
      ) : (
        <></>
      )}

      {/* <div className={`${styles.megamenu__filters}`}>
        <Filters />
      </div>
	  Removed as per Imran's comment
	   */}
    </div>
  );
};

export default MegaMenu;