import { ChevronRightIcon } from "@chakra-ui/icons";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from "@chakra-ui/react";
import { useNavigate, useLocation } from "react-router-dom";

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default function BreadcrumbNavigation({ title }: any): JSX.Element {
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const pathnames = pathname.split("/").filter(Boolean);

  // check the pathName for numbers, upper and lower case.
  //return new path name with spaces, no numbers, and first letter capital
  // function UpdatePathName(input: string) {
  //   console.log(input);
  //   const result = input.match(/[A-Z]?[a-z]+|\d+|[A-Z]+(?![a-z])/g);
  //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //   // @ts-ignore: Object is possibly 'null'
  //   const newPathName = result.slice(0, 1).join(" ");

  //   return newPathName.charAt(0).toUpperCase() + newPathName.slice(1);
  // }

  return (
    <Breadcrumb
      spacing="8px"
      separator={<ChevronRightIcon color="gray.500" />}
    >
      <BreadcrumbItem key={"home"}>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
      </BreadcrumbItem>
      {pathnames.map((name, index) => {
        const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
        // const isLast = index === pathnames.length - 1;
        // const newPathName = UpdatePathName(name);
        return pathnames.length === 1 ? (
          <BreadcrumbItem
            key={title}
            id={title}
            isCurrentPage
          >
            <BreadcrumbLink href="#">{title}</BreadcrumbLink>
          </BreadcrumbItem>
        ) : (
          <BreadcrumbItem
            key={name}
            id={name}
            isCurrentPage
          >
            <BreadcrumbLink onClick={() => navigate(routeTo)}>
              {name.replace(/%20/g, " ")}
            </BreadcrumbLink>
          </BreadcrumbItem>
        );
      })}
    </Breadcrumb>
  );
}