import { Link, useLocation, useParams } from "react-router-dom";
import { findElementInFlatRoutes } from "../utils/RoutingTableUtils";
import { capitalizeFirstLetter } from "../utils/StringTransformationUtils";

const BREADCRUMB_BAR_CLASSES =
	"text-sm breadcrumbs max-w pl-6 shadow-neutral-focus shadow-sm sticky top-2 z-10 bg-neutral transition-all rounded-md m-2 w-auto";

const Breadcrumbs = () => {
	const location = useLocation();
	const pathnames = location.pathname.split("/").filter((x) => x);
	const pathParams = useParams();

	const hideBreadcrumbBar = (path: string) => {
		// if (Object.keys(pathParams).length !== 0) return true;
		const _route = findElementInFlatRoutes(path);
		return _route?.disableBreadcrumbBar || false;
	};

	const findRouteNameByPath = (path: string) => {
		const _route = findElementInFlatRoutes(path);
		return _route?.name || path;
	};

	const renderLinkBreadcrumb = (
		value: string,
		index: number,
		pathnames: string[],
	) => {
		if (value === pathParams.id) return null;
		const to = `/${pathnames.slice(0, index + 1).join("/")}`;
		const routeName = capitalizeFirstLetter(findRouteNameByPath(value));
		return (
			<li key={to} className="text-neutral-content">
				<Link to={to}>{routeName}</Link>
			</li>
		);
	};

	const renderTextBreadcrumb = (value: string) => {
		if (value === pathParams.id) return null;
		const routeName = capitalizeFirstLetter(findRouteNameByPath(value));
		return (
			<li key={value} className="text-neutral-content">
				{routeName}
			</li>
		);
	};

	if (hideBreadcrumbBar(location.pathname)) {
		return (
			<div className={BREADCRUMB_BAR_CLASSES}>{pathnames[0].toUpperCase()}</div>
		);
	}

	return (
		<div className={BREADCRUMB_BAR_CLASSES}>
			<ul>
				<li className="text-neutral-content">
					<Link to="/">Home</Link>
				</li>
				{pathnames.map((value, index) => {
					const isLast = index === pathnames.length - 1;
					return isLast
						? renderTextBreadcrumb(value)
						: renderLinkBreadcrumb(value, index, pathnames);
				})}
			</ul>
		</div>
	);
};

export default Breadcrumbs;