import React, { useContext } from "react";
import Link from "next/link";
import { ChevronRightIcon } from "@heroicons/react/24/outline";
import { AuthContext } from "@/context/AuthContext";
import { CurrentObjectContext } from "@/context/CurrentObjectContext";

export const getPreviousPaths = (index: number, pathname: string): string => {
  return index === 0
    ? "/dashboard"
    : pathname
        .split("/")
        .filter((_, idx) => idx <= index)
        .join("/");
};

const hasDatePattern = (str: string): boolean => {
  if (typeof str !== "string" || str.length < 11) return false;
  const pattern = /\s\d{4}\s\d{2}\s\d{2}$/; // " #### ## ##" # = digit
  return pattern.test(str);
};

const removeDatePattern = (str: string): string => {
  if (hasDatePattern(str)) {
    return str.slice(0, -11);
  }
  return str;
};

export default function BreadCrumbs({
  pathname,
  breadcrumbs,
}: {
  pathname: string;
  breadcrumbs: string[];
}) {
  const { isSuperAdmin } = useContext(AuthContext);
  const { object } = useContext(CurrentObjectContext);

  const handleIdNumber = (
    pathname: string,
    id: string | number
  ): string | number => {
    const split = pathname.split("/").filter((str) => str !== "");

    // if date pattern exists at the end of the string, remove it
    if (typeof id === "string") {
      id = removeDatePattern(id);
    }
    if (
      split.length === 3 &&
      (split[1] === "organizations" ||
        split[1] === "my-competitions" ||
        split[1] === "competitions")
    ) {
      return object.hasOwnProperty("name") && object.name;
    }
    if (object && split.length === 3 && split[1] === "users") {
      return object.first_name + " " + object.last_name || id;
    }
    return id;
  };

  const handleIdOnThird = (
    pathname: string,
    id: string | number
  ): string | number => {
    const split = pathname.split("/").filter((str) => str !== "");
    // if date pattern exists at the end of the string, remove it
    if (typeof id === "string") {
      id = removeDatePattern(id);
    }

    if (
      split.length === 4 &&
      (split[1] === "organizations" ||
        split[1] === "my-competitions" ||
        split[1] === "competitions")
    ) {
      return object.hasOwnProperty("name") && object.name;
    }
    if (object && split.length === 3 && split[1] === "users") {
      return object.first_name + " " + object.last_name || id;
    }
    return id;
  };

  return (
    <nav className="flex p-4" aria-label="Breadcrumb">
      <ol role="list" className="flex items-center space-x-4">
        {pathname === "/dashboard/" ? (
          <li key={1} className="flex items-center">
            <p className="text-xs font-medium text-gray-400">Dashboard</p>
          </li>
        ) : breadcrumbs.length > 1 ? (
          breadcrumbs.map((crumb, index) =>
            index < breadcrumbs.length - 1 ? (
              <li key={crumb} className="flex items-center">
                {crumb === "Organizations" ? (
                  <Link
                    className="text-xs font-medium text-gray-400 hover:text-gray-200"
                    href={getPreviousPaths(index + 1, pathname)}
                  >
                    {crumb === "Organizations" ? "Clubs" : crumb}
                  </Link>
                ) : crumb === "Organization" && !isSuperAdmin ? (
                  <li
                    key={crumb}
                    className="flex items-center text-xs font-medium text-gray-400"
                  >
                    {crumb}
                  </li>
                ) : index === breadcrumbs.length - 2 &&
                  breadcrumbs.length > 3 ? (
                  <Link
                    key={crumb}
                    className={`flex items-center text-xs font-medium text-gray-400 hover:text-gray-200 ${
                      pathname.split("/").filter((p) => p !== "")[1] !== "users"
                        ? "capitalize"
                        : ""
                    }`}
                    href={pathname.split("/").splice(0, 4).join("/")}
                  >
                    {handleIdOnThird(pathname, crumb)}
                  </Link>
                ) : (
                  <Link
                    className="text-xs font-medium text-gray-400 hover:text-gray-200"
                    href={getPreviousPaths(index + 1, pathname)}
                  >
                    {crumb}
                  </Link>
                )}
                <ChevronRightIcon
                  className="w-4 ml-4 text-gray-500"
                  aria-hidden="true"
                />
              </li>
            ) : (
              <Link
                key={crumb}
                className={`flex items-center text-xs font-medium text-gray-400 hover:text-gray-200 ${
                  pathname.split("/").filter((p) => p !== "")[1] !== "users"
                    ? "capitalize"
                    : ""
                }`}
                href={pathname}
              >
                {handleIdNumber(
                  pathname,
                  crumb === "Organizations" ? "Clubs" : crumb
                )}
              </Link>
            )
          )
        ) : (
          <li
            key={1}
            className="flex items-center text-xs font-medium text-gray-400"
          >
            Dashboard
          </li>
        )}
      </ol>
    </nav>
  );
}