import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
import { Badge, Box, IconButton } from "@mui/material";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import style from "./Header.module.css";
import MenuIcon from "@mui/icons-material/Menu";

const navbar = [
  {
    link: "#",
    name: "Products",
    subcat: [
      { link: "/digital-preschool-curriculum", name: "TeenyBeans" },
      {
        link: "/interactive-learning-resources-for-preschool",
        name: "InteraKto",
      },
      {
        link: "/interakto-coding-worksheets",
        name: "InteraKto Coding",
      },
      { link: "/mother-toddler-program", name: "Toddlers" },
    ],
  },
  {
    link: "/learning-solutions-for-preschools",
    name: "For Schools",
  },
  {
    link: "/preschool-management-solutions",
    name: "Platform",
  },
  {
    link: "#",
    name: "Pricing",
    subcat: [
      { link: "/pricing/akadmy-platform-pricing", name: "Platform" },
      { link: "/pricing/akadmy-product-pricing", name: "Products" },
    ],
  },
  {
    link: "/blogs",
    name: "Blogs",
  },
];

function Header({ theme = "LIGHT", color }) {
  const [active, setActive] = useState("");
  const { purchaseDetails } = useSelector(({ purchase }) => {
    return { purchaseDetails: purchase.purchaseDetails };
  });

  const [open, setOpen] = useState(false);
  return (
    <div
      className={
        theme === "LIGHT"
          ? style.light
          : theme === "DARK"
          ? style.dark
          : theme === "DARK2"
          ? style.dark2
          : ""
      }
    >
      <div className={style.container}>
        <div className={style.menus}>
          <div className={style.logo}>
            <a href="/">
              <img
                src={"/assets/akademy_Logo.png"}
                width={80}
                alt="akadmy Logo"
              />
            </a>
          </div>
          <div className={style.menus1}>
            {navbar.map((item, i) => (
              <div key={i} className={`${style.dropdown} ${style.product}`}>
                <a href={item.link} style={{ color: color, fontWeight: 500 }}>
                  {item.name}
                </a>
                {item?.subcat && <ArrowDropDownIcon style={{ color: color }} />}
                <div className={style.dropdown_content}>
                  {item?.subcat?.map((subItem, i) => (
                    <a key={i} href={subItem.link}>
                      {subItem.name}
                    </a>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className={style.menus2}>
          <a href="/purchase/cart">
            <IconButton aria-label="cart" size="large">
              <Badge
                badgeContent={
                  purchaseDetails &&
                  purchaseDetails.cartItems &&
                  purchaseDetails.cartItems.length
                }
                color="warning"
              >
                <ShoppingCartOutlinedIcon style={{ color: color }} />
              </Badge>
            </IconButton>
          </a>
        </div>
        {/* mobile sidebar */}
        <div className={style.burger_menu}>
          <a href="/purchase/cart">
            <IconButton aria-label="cart" size="large">
              <Badge
                badgeContent={
                  purchaseDetails &&
                  purchaseDetails.cartItems &&
                  purchaseDetails.cartItems.length
                }
                color="warning"
              >
                <ShoppingCartOutlinedIcon style={{ color: color }} />
              </Badge>
            </IconButton>
          </a>
          <MenuIcon onClick={() => setOpen(true)} style={{ color: color }} />
          {open ? (
            <div className={style.sidenav}>
              <a
                style={{ color: color === "white" ? "#818181" : color }}
                className={style.closebtn}
                onClick={() => setOpen(false)}
              >
                &times;
              </a>
              {navbar.map((item, i) => (
                <div key={i}>
                  <Box
                    sx={{ display: "flex" }}
                    onClick={() => setActive(item.name)}
                  >
                    <a
                      href={item.link}
                      style={{
                        color: color === "white" ? "#818181" : color,
                        fontWeight: 500,
                      }}
                    >
                      {item.name}
                    </a>
                    {item?.subcat && (
                      <ArrowDropDownIcon
                        style={{ color: color === "white" ? "#818181" : color }}
                        sx={{ mt: 1 }}
                      />
                    )}
                  </Box>
                  {active === item.name ? (
                    <Box ml={2}>
                      {item?.subcat?.map((subItem, i) => (
                        <a
                          key={i}
                          href={subItem.link}
                          style={{
                            color: color === "white" ? "#818181" : color,
                          }}
                        >
                          {subItem.name}
                        </a>
                      ))}
                    </Box>
                  ) : null}
                </div>
              ))}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
}

export default Header;
