"use client";

import { useEffect, useState } from "react";
import { Button } from "@heroui/button";
import { BreadcrumbItem, Breadcrumbs } from "@heroui/react";
import { usePathname, useRouter } from "next/navigation";
import { Image } from "@heroui/react";
import { BurgerButtonIcon, FormLayoutIcon } from "../icons";
import {
  ArticleIcon,
  DashboardIcon,
  MagazineIcon,
  MasterCategoryIcon,
  MasterRoleIcon,
  MasterUsersIcon,
  MenuBurgerIcon,
  StaticPageIcon,
} from "../icons/sidebar-icon";
import { useSidebar } from "../layout/sidebar/sidebar-context";

export const Breadcrumb = () => {
  const [currentPage, setCurrentPage] = useState<React.Key>("");
  const router = useRouter();
  const pathname = usePathname();
  const pathnameSplit = pathname.split("/");
  const { isOpen, toggleSidebar } = useSidebar();

  pathnameSplit.shift();
  let pathnameTransformed = pathnameSplit.map((item) => {
    let words = item.split("-");
    let capitalizedWords = words.map(
      (word) => word.charAt(0).toUpperCase() + word.slice(1)
    );
    return capitalizedWords.join(" ");
  });

  useEffect(() => {
    setCurrentPage(pathnameSplit[pathnameSplit.length - 1]);
  }, [pathnameSplit]);

  const handleAction = (key: any) => {
    const keyIndex = pathnameSplit.indexOf(key);
    const combinedPath = pathnameSplit.slice(0, keyIndex + 1).join("/");
    router.push("/" + combinedPath);
  };

  return (
    <div className="h-[100px] border-b-1 dark:border-b-1  dark:bg-black border-gray-300 dark:border-white">
      <div className="px-4 md:px-8">
        <div className="flex flex-row justify-between items-center py-3">
          <div className="">
            <p className="text-2xl font-semibold mb-2">
              {pathnameTransformed[pathnameTransformed.length - 1]}
            </p>
            <Breadcrumbs
              underline="active"
              onAction={(key) => handleAction(key)}
            >
              {pathnameTransformed?.map(
                (item, index) =>
                  item !== "Admin" && (
                    <BreadcrumbItem
                      key={pathnameSplit[index]}
                      isCurrent={pathnameSplit[index] === currentPage}
                    >
                      {item}
                    </BreadcrumbItem>
                  )
              )}
            </Breadcrumbs>
          </div>
          <div className="lg:hidden">
            {!isOpen && (
              <button
                className="w-5 h-5 mb-3 text-zinc-400 dark:text-zinc-400 z-50 flex justify-center items-center"
                onClick={toggleSidebar}
              >
                <BurgerButtonIcon />
              </button>
            )}
          </div>
          <div className="hidden lg:block">
            {pathname.includes("dashboard") && <DashboardIcon size={50} />}
            {pathname.includes("article") && <ArticleIcon size={50} />}
            {pathname.includes("master-category") && (
              <MasterCategoryIcon size={50} />
            )}
            {pathname.includes("magazine") && <MagazineIcon size={50} />}
            {pathname.includes("static-page") && <StaticPageIcon size={50} />}
            {pathname.includes("master-user") && <MasterUsersIcon size={50} />}
            {pathname.includes("master-role") && <MasterRoleIcon size={50} />}
            {/* <FormLayoutIcon width={50} height={50} /> */}
          </div>
        </div>
      </div>
    </div>
  );
};