"use client";

import { useEffect, useState } from "react";
import { usePathname, useRouter } from "next/navigation";
import {
  ArticleIcon,
  DashboardIcon,
  MagazineIcon,
  MasterCategoryIcon,
  MasterRoleIcon,
  MasterUsersIcon,
  StaticPageIcon,
} from "../icons/sidebar-icon";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "../ui/breadcrumb";
import React from "react";

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

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

  console.log("pathname : ", pathnameTransformed);

  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] w-full">
      <div className="px-4 md:px-8">
        <div className="flex flex-row justify-between items-center py-3">
          <div className="flex flex-row justify-between w-full">
            <div>
              <p className="text-2xl font-semibold mb-2">
                {pathnameTransformed[pathnameTransformed.length - 1]}
              </p>
              <Breadcrumb>
                <BreadcrumbList>
                  {pathnameTransformed
                    ?.filter((item) => item !== "Admin")
                    .map((item, index, array) => (
                      <React.Fragment key={pathnameSplit[index]}>
                        <BreadcrumbItem>
                          <BreadcrumbLink
                            onClick={() => handleAction(pathnameSplit[index])}
                            className={
                              pathnameSplit[index] === currentPage
                                ? "font-semibold"
                                : ""
                            }
                          >
                            {item}
                          </BreadcrumbLink>
                        </BreadcrumbItem>
                        {index < array.length - 1 && <BreadcrumbSeparator />}
                      </React.Fragment>
                    ))}
                </BreadcrumbList>
              </Breadcrumb>
            </div>
          </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>
  );
};