import { FC, useContext, useEffect, useState } from "react";
import styles from "./MegaMenu.module.scss";
import { createBreadcrumb, getFlattenCategory } from "../../globalUtils/utils";
import shopConetxt from "../../../context/shopConetxt";
import { useRouter } from "next/router";
import { HiOutlineChevronRight } from "react-icons/hi";
import cx from "classnames";

const List: FC<any> = ({ menu, onMenuChange }) => {
  const { setCategoryTreeNested, setCategoryBreadcrumb, categoryTreeNested } =
    useContext(shopConetxt);

  const [selectedItem, setSelectedItem] = useState("");
  const [selectedSubItem, setSelectedSubItem] = useState("");
  const [subMenuItems, setSubMenuItems] = useState([]);
  const router = useRouter();
  useEffect(() => {
    setSelectedItem(menu.length > 0 ? menu[0].name : "");
    updateSubMenuItems(menu.length > 0 ? menu[0].name : "");
  }, [menu]);

  const updateSubMenuItems = (selectedMenu: any) => {
   
    const selectedMenuItems = menu.find(
      ({ name }: any) =>
        (name || "").toLowerCase() === (selectedMenu || "").toLowerCase()
    );

    setSubMenuItems(selectedMenuItems?.children || []);
    onMenuChange(selectedMenuItems?.children?.[0]);
    if (selectedMenuItems?.children?.length === 0) {
      // onMenuChange([]);
      const flattenCategory = getFlattenCategory(categoryTreeNested);
      const breadCrumbData = createBreadcrumb(
        selectedMenuItems.id,
        flattenCategory
      );
      setCategoryBreadcrumb(breadCrumbData);
      localStorage.setItem("WithoutProduct",selectedMenu)
       
    
      router.push({
        pathname: `/products/${selectedMenuItems.id}`
      });
    }
    setSelectedSubItem(selectedMenuItems?.children[0]?.name || "");
    // onMenuChange(selectedMenuItems?.children[0]?.name || "");
  };

  const onMenuSelctionChange = (evt: any) => {
    // console.log(evt.target.innerText,"selectedMenu")
    const menuName = evt.target.innerText;
    if(selectedItem!=menuName){
      // console.log(menuName,"selectedMenu fdfdf")
    setSelectedItem(menuName);
    updateSubMenuItems(menuName);
    }
  };

  const onSubMenuSelctionChange = (evt: any) => {
    const menuName = evt.name;

    setSelectedSubItem(menuName);
    if(evt?.children.length==0){
      const flattenCategory = getFlattenCategory(categoryTreeNested);
      const breadCrumbData = createBreadcrumb(
        evt?.id,
        flattenCategory
      );
      setCategoryBreadcrumb(breadCrumbData);
      router.push({
        pathname: `/products/${evt?.id}`,
      });
    }

    onMenuChange(evt);
  };

  return (
    <>
      <div
        className={`${styles.megamenu__list__main} flex flex-col h-full pt-4 `}
      >
        {menu.length > 0 &&
          menu.map((menuItem: any, index: number) => {
            return (
              <div
                key={index}
                className={cx(
                  `w-11/12 mx-2 py-2 my-1 pl-2 rounded hover:${
                    styles.megamenu__bgColor
                  } ${
                    selectedItem === menuItem.name
                      ? `${styles.megamenu__bgColor}`
                      : ""
                  } cursor-pointer`,
                  styles.menuList
                )}
                onClick={onMenuSelctionChange}
              >
                <div> {menuItem.name} </div>
                <div>
                  <HiOutlineChevronRight
                    style={{ color: "#291C61", marginRight: "0.25em" }}
                  />
                </div>
              </div>
            );
          })}
      </div>
      <div
        className={`${styles.megamenu__list__sublist} flex flex-col h-full pt-4 `}
      >
        {subMenuItems.map((item: any, idx: number) => {
          return (
            <div
              key={idx}
              className={cx(`py-2 my-1 pl-2 rounded  hover:${
                styles.megamenu__bgColorSublist
              }  ${
                selectedSubItem === item.name
                  ? `${styles.megamenu__bgColorSublist}`
                  : ""
              } cursor-pointer`,styles.menuSublist)}
              onClick={() => {
                onSubMenuSelctionChange(item);
              }}
            >
              <div> {item.name} </div>
              <div>
                <HiOutlineChevronRight
                  style={{ color: "#291C61", marginRight: "0.25em" }}
                />
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default List;