import Search from "antd/lib/input/Search";
import { useRouter } from "next/router";
import { FC, useContext, useEffect, useState } from "react";
import Link from "next/link";
import { menuDetails } from "../../../mockData/menu";
import shopConetxt from "../../../context/shopConetxt";
import omit from "lodash/omit";
import get from "lodash/get";
import { createBreadcrumb, getFlattenCategory } from "../../globalUtils/utils";
import cx from "classnames";
import styles from "./MegaMenu.module.scss";
import {
  Button,
  Col,
  Dropdown,
  Image,
  Menu,
  MenuProps,
  Row,
  Select,
  Space,
} from "antd";
import { DownOutlined } from "@ant-design/icons";
import Input from "antd/lib/input/Input";
import { FiSearch } from "react-icons/fi";
import { useMediaQuery } from "react-responsive";

const Details: FC<any> = ({ name, selectedSubMenu, brandList }) => {
  const { setCategoryTreeNested, setCategoryBreadcrumb, categoryTreeNested } =
    useContext(shopConetxt);
  // const detailsData = menuDetails[(selectedSubMenu || "").trim()] || [];
  const [searchText, setSearchText] = useState("");
  const screenCheck = useMediaQuery({ maxWidth: 1100 });

  const router = useRouter();

  const handleCategorySelect = (categoryId: any) => {
    // const breadCrumbData = createBreadcrumb(categoryId);
    // setCategoryBreadcrumb(breadCrumbData);
    const flattenCategory = getFlattenCategory(categoryTreeNested);
    // console.log(flattenCategory,"flattenCategory")
    const breadCrumbData = createBreadcrumb(categoryId, flattenCategory);
    // console.log(breadCrumbData,"breadCrumbData")
    setCategoryBreadcrumb(breadCrumbData);
    
    console.log("Navigating to category:", categoryId, "with breadcrumb data:", breadCrumbData);
    router.push({
      pathname: `/products/${categoryId}`
    });
  };


  return (
    <div className="flex flex-col justify-start groups">
      <div className={styles.headerDetails}>
        <span className={styles.headerText}>{name}</span>
        <Space direction={screenCheck ? "vertical" : "horizontal"}>
          {/* <Input
            placeholder={`Search Category within ${name}`}
            className={styles.searchStyle}
            suffix={<FiSearch style={{ fontSize: "18px" }} />}
            onChange={(e) => setSearchText(e.target.value)}
          /> */}
          {/* <Select
            placeholder="By Brand"
            options={brandList && brandList.map((brand: any) => {
              return {
                value: brand.id,
                label: brand.brand_name,
              };
            })}
            className={styles.buttonStyle}
          /> */}
        </Space>
      </div>
      <div style={{ width: "80%" }}>
        <Row gutter={[16, 16]}>
          {selectedSubMenu.length > 0 &&
            selectedSubMenu
              .filter((menu: any) =>
                menu?.name?.toLowerCase()?.includes(searchText)
              )
              .map((groups: any, index: number) => {

                return (
                  <div
                    key={index}
                    onClick={() => handleCategorySelect(groups.id)}
                  >
                    <Col span={8}>
                      <div className={styles.cardStyle}>
                        <div className={styles.cardText}>
                          <span className={styles.cardTextName}>
                            {groups.name}
                          </span>
                          <span
                            className="self-start font-medium cursor-pointer"
                            style={{ color: "#291C61" }}
                          >
                            See all
                          </span>
                        </div>

                        <div className="flex justify-center items-center">
                          <Image
                            src={groups?.category_icon_path}
                            alt={"img"}

                            width={"100%"}
                            preview={false}
                          />
                        </div>
                      </div>
                    </Col>

                    {/* <div
                  className={cx(
                    "flex w-56  p-3 justify-self-start font-medium",
                    styles.subMenuCardStyles
                  )}
                >
                  <div
                    className="self-start"
                    style={{
                      color: "#291C61",
                      width: "150px",
                      fontSize: "18px",
                    }}
                  >
                    {groups.name}
                  </div>
                  <div className="flex justify-center items-center">
                    <Image
                      src={`/images/categories/sub-cat/${index + 1}.png`}
                      alt={groups.alt}
                      width={60}
                      height={60}
                    />
                  </div>
                  <span
                    className="self-start font-medium cursor-pointer"
                    style={{ color: "#291C61" }}
                  >
                    See all
                  </span>
                </div> */}
                    {/* <div className="group-header pl-6 mt-12">{groups.name}</div> */}

                    {/* /* Children Cards */}
                    {/* <div className="group-details flex flex-row flex-wrap m-2">
                  {groups.children.length > 0 &&
                    groups.children.map((group: any, idx: number) => {
                      return (
                        <div key={idx}>
                          <div
                            className={cx(
                              "w-56   m-2 p-3 justify-self-start font-medium",
                              styles.subMenuCardStyles
                            )}
                          >
                            <div
                              className="self-start"
                              style={{ color: "#291C61", width: "150px" }}
                            >
                              {group.name}
                            </div>
                            <span
                              className="justify-self-end font-medium cursor-pointer"
                              style={{ color: "#291C61" }}
                              onClick={() => handleCategorySelect(group.id)}
                            >
                              See all
                            </span>

                            <ul
                              className="flex flex-col text-xs justify-self-start font-normal"
                              style={{ fontSize: "9px", lineHeight: "normal" }}
                            >
                              {group.children.length > 0 &&
                                group.children.map(
                                  (subgroup: any, inx: number) => (
                                    <li key={inx}>{subgroup.name}</li>
                                  )
                                )}
                            </ul>
                            <div className="flex justify-center items-center">
                              <Image
                                src={`/images/categories/sub-cat/${
                                  idx + 1
                                }.png`}
                                alt={group.alt}
                                width={60}
                                height={60}
                              />
                            </div>
                          </div>
                        </div>
                      );
                    })}
                </div> */}
                  </div>
                );
              })}
        </Row>
      </div>
    </div>
  );
};

export default Details;