import { FC, useMemo } from "react";
import { useRouter } from "next/router";
import { Breadcrumbs, Link as MuiLink } from "@mui/material";
import Link from "next/link";

export const DefaultNavbar: FC = () => {
  const router = useRouter();

  const breadcrumbs = useMemo(() => {
    const linkPath = router.asPath.split("/");
    linkPath.shift();
    return linkPath.map((path, i) => ({
      breadcrumb: path,
      href: "/" + linkPath.slice(0, i + 1).join("/"),
    }));
  }, [router.asPath]);

  if (!breadcrumbs) {
    return null;
  }

  console.log(breadcrumbs);

  return (
    <Breadcrumbs aria-label="breadcrumb">
      <Link href="/" passHref>
        <MuiLink
          underline="hover"
          color={
            breadcrumbs.length === 1 && breadcrumbs[0].href == "/"
              ? "text.primary"
              : "inherit"
          }
        >
          home
        </MuiLink>
      </Link>

      {breadcrumbs.map((breadcrumb, i) => (
        <Link key={breadcrumb.href} href={breadcrumb.href} passHref>
          <MuiLink
            underline="hover"
            color={i === breadcrumbs.length - 1 ? "text.primary" : "inherit"}
          >
            {breadcrumb.breadcrumb}
          </MuiLink>
        </Link>
      ))}
    </Breadcrumbs>
  );
};