import React, { ReactNode, useContext, useEffect } from 'react';
import breadcrumbsContext from "./breadcrumbs-context";
import { useLocation } from "react-router-dom";
import useRole from "../hooks/useRole";

type BreadcrumbItem = {
    level: number;
    text: string;
    link?: string;
};

type UseSetBreadCrumbs = {
    (level: number, text: string | null, link?: string): void;
    (items: BreadcrumbItem[]): void;
};

const useSetBreadCrumbs: UseSetBreadCrumbs = (
    levelOrItems: number | BreadcrumbItem[],
    text?: string | null,
    link?: string
) => {
    const { addBreadcrumb, removeBreadcrumb } = useContext(breadcrumbsContext);
    const { pathname, search } = useLocation();
    const activeRole = useRole();

    useEffect(() => {
        let items: BreadcrumbItem[] = [];

        // ✅ Normalize input
        if (Array.isArray(levelOrItems)) {
            items = levelOrItems;
        } else {
            if (!text || text.trim() === "") return;

            items = [
                {
                    level: levelOrItems,
                    text,
                    link,
                },
            ];
        }

        const validItems = items.filter(
            item => item.text && item.text.trim() !== ""
        );

        if (validItems.length === 0) return;

        // ✅ Add all
        validItems.forEach(item => {
            addBreadcrumb(
                {
                    link: item.link ?? pathname + search,
                    text: item.text,
                },
                item.level
            );
        });

        // ✅ Cleanup
        return () => {
            validItems.forEach(item => {
                removeBreadcrumb(item.level);
            });
        };

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [
        Array.isArray(levelOrItems)
            ? JSON.stringify(levelOrItems)
            : text
    ]);
};

export default useSetBreadCrumbs;