import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { RxCross2 } from "react-icons/rx";
import { GiHamburgerMenu } from "react-icons/gi";
import { userActivity } from "@/components/commonFunctions/userActivity";
import jwt from "jsonwebtoken";
import Cookies from "js-cookie";

type NavItemProps = { link: string; name: string };
type SidebarDataProps = {
  title?: string;
  navItem: NavItemProps[];
};

const sidebarData: SidebarDataProps[] = [
  {
    title: "Admin",
    navItem: [{ link: "/admin", name: "Dashboard" }],
  },
  {
    navItem: [{ link: "/admin/brand", name: "Brands" }],
  },
  {
    navItem: [{ link: "/admin/banner", name: "Banner" }],
  },
  {
    navItem: [{ link: "/admin/messaging", name: "Messaging" }],
  },
  {
    title: "MASTER",
    navItem: [
      { link: "/admin/category", name: "Category" },
      { link: "/admin/subCategory", name: "Sub Category" },
      { link: "/admin/attributes", name: "Attributes" },
      { link: "/admin/variations", name: "Variations" },
    ],
  },
  {
    title: "PRODUCTS",
    navItem: [
      { link: "/admin/product", name: "Products" },
      { link: "/admin/productStatus", name: "Product Status" },
      { link: "/admin/shuffleproduct", name: "Shuffle Product" },
      { link: "/admin/delivered-products", name: "Delivered Products" },
    ],
  },
  {
    title: "REPORTS",
    navItem: [
      { link: "/admin/seller", name: "Seller" },
      { link: "/admin/user", name: "User" },
      { link: "/admin/dateWiseUser", name: "Datewise Users" },
      { link: "/admin/dateWiseOrder", name: "Sold Product" },
      { link: "/admin/airtelUser", name: "Airtel Users" },
      { link: "/admin/userActivity", name: "Users Activity" },
    ],
  },
  {
    title: "REFERRAL",
    navItem: [
      { link: "/admin/referral/addNewMarketer", name: "Add New Marketer" },
      { link: "/admin/referral/marketer-list", name: "All Marketers" },
    ],
  },
];

const Sidebar: React.FC = () => {
  const router = useRouter();
  const [menu, setMenu] = useState(false);
  const token: any = Cookies.get("jazz_admin_token");

  const decodedToken = jwt.decode(token);

  const userId = decodedToken ? decodedToken.sub : null;
  const toggleMenu = () => {
    setMenu(!menu);
  };

  const handleLinkClick = (link: string, name: string) => {
    const userAgent = navigator.userAgent;
    userActivity(userId , "admin", ` ${name}`, { pageVisit: link }, userAgent);
    router.push(link);
  };

 

  return (
    <div className="relative z-10">
      {/* for lg screen */}
      <div className="h-full hidden lg:block">
        <aside className=" w-full p-4 bg-[#383736] text-white h-full min-h-screen cursor-pointer ">
          <ul>
            {sidebarData.map((item, index) => (
              <li key={index}>
                <div className="text-xs mt-[.8rem] ">{item.title}</div>
                <ul>
                  {item.navItem.map((navItem, subIndex) => (
                    <li
                      key={subIndex}
                      className={`${
                        router.pathname === navItem.link
                          ? "bg-[#FF332B] text-white "
                          : "hover:bg-gray-600"
                      } rounded p-1 px-4 my-1`}
                      onClick={() => handleLinkClick(navItem.link, navItem.name)}
                    >
                      <div>{navItem.name}</div>
                    </li>
                  ))}
                </ul>
              </li>
            ))}
          </ul>
        </aside>
      </div>

      {/* for below lg screen */}
      <div className="absolute h-full block w-max lg:hidden">
        {!menu && (
          <div
            onClick={toggleMenu}
            className="z-10 top-5 lg:hidden p-2 m-2 bg-gray-300 rounded hover:text-[#FE342B] transition-all duration-300 "
          >
            <GiHamburgerMenu
              size={25}
              className="hover:text-[#FE342B] transition-all duration-300"
            />
          </div>
        )}

        {menu && (
          <div>
            <div
              onClick={toggleMenu}
              className="absolute right-5 z-10 top-5 lg:hidden"
            >
              <RxCross2
                size={20}
                className="hover:text-[#FE342B] transition-all duration-300 text-white "
              />
            </div>
            <aside className=" w-full p-4 cursor-pointer bg-[#383736] text-white h-full min-h-screen ">
              <ul>
                {sidebarData.map((item, index) => (
                  <li key={index}>
                    <div className="text-xs mt-[.8rem]">{item.title}</div>
                    <ul>
                      {item.navItem.map((navItem, subIndex) => (
                        <li
                          key={subIndex}
                          className={`${
                            router.pathname === navItem.link
                              ? "bg-[#FF332B] text-white"
                              : "hover:bg-gray-600"
                          } rounded p-1 px-4 my-1`}
                          onClick={() => handleLinkClick(navItem.link, navItem.name)}
                        >
                          <div>{navItem.name}</div>
                        </li>
                      ))}
                    </ul>
                  </li>
                ))}
              </ul>
            </aside>
          </div>
        )}
      </div>
    </div>
  );
};

export default Sidebar;