"use client";

import { useEffect, useState } from "react";
import { Button } from "@nextui-org/button";
import { BreadcrumbItem, Breadcrumbs } from "@nextui-org/react";
import { usePathname, useRouter } from "next/navigation";
import { Image } from "@nextui-org/react";
import { FormLayoutIcon } from "../icons";

export const Breadcrumb = () => {
	const [currentPage, setCurrentPage] = useState<React.Key>("");
	const router = useRouter();
	const pathname = usePathname();
	const pathnameSplit = pathname.split("/");
	pathnameSplit.shift();
	let pathnameTransformed = pathnameSplit.map(item => {
		let words = item.split('-');
		let 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="flex h-[100px] gap-0 grid rounded-lg border-small ml-4">
			<div className="px-6">
				<div className="flex flex-row justify-between items-center">
					<div className="pt-1">
						<p className="text-2xl font-semibold mb-2">{pathnameTransformed[pathnameTransformed.length - 1]}</p>
						<Breadcrumbs underline="active" onAction={(key) => handleAction(key)}>
							{pathnameTransformed?.map((item, index) => (
								<BreadcrumbItem key={pathnameSplit[index]} isCurrent={pathnameSplit[index] === currentPage}>
									{item}
								</BreadcrumbItem>
							))}
						</Breadcrumbs>
					</div>
					<div className="pt-2">
						<FormLayoutIcon width={50} height={50} />
					</div>
				</div>
			</div>
		</div >
	);
};