import React, {
    createContext,
    Dispatch,
    PropsWithChildren,
    SetStateAction,
    useContext,
    useEffect,
    useState
} from "react";
import {useLocation, useParams} from "react-router-dom";
import useTranslations from "../hooks/useTranslations";
import useSettingsTree from "../hooks/useSettingsTree";


interface BreadcrumbsContextInterface {
    breadcrumbs: Breadcrump[],
    addBreadcrumb: (b: Breadcrump, l?: number) => void,
    newBreadcrumbs: (b: Breadcrump[]) => void,
    removeBreadcrumb: (l:number) => void
}

const topLevelPage = {
    dashboard: "Καλώς Ήρθατε στο D.U.A.",
    news: "Νέα & Ανακοινώσεις",
    messages: "Μηνύματα",
    applications: "Εφαρμογές",
    services: "'Ολες οι υπηρεσίες",
    avatarmanagement: "Διαχείριση Avatar",
    settings: "Ρυθμίσεις",
}

const secondLevelPage = {
    profile: "Ρυθμίσεις Προφίλ",
    notifications: "Ρυθμίσεις Ενημερώσεων",
    reminderssettings: "Ρυθμίσεις Υπενθυμίσεων",
}

interface Breadcrump {
    text: string
    link: string
}

const BreadcrumbsContext = createContext({} as BreadcrumbsContextInterface);

export const BreadcrumbsContextProvider: React.FC<PropsWithChildren> = (props) => {

    const [breadcrumbs, setBreadcrumbs] = useState<Breadcrump[]>([])
    let location = useLocation();
    const {application, settings_cat} = useParams();
    const [_, topPage, secondLevel, thirdLevel, fourthLevel, actionsLevel] = location.pathname.split(/[/]/);

    useEffect(() => {

        /**
         * only the top level static breadcrumbs are constructed here
         *
         * the rest are in the use effect of
         * -> ApplicationPage / ServicePage / {INNER COMPONENT}  (meaning 3 separate use effects in each one of these)
         * OR
         *  -> SettingsCategoryPage / SettingPage / {INNER COMPONENT} (meaning 3 separate use effects in each one of these)
         */
        if (!application && !settings_cat) {

            const nbreadcrumps: Breadcrump[] = [];
            const firstLink = secondLevel ? `${topPage}` : location.pathname;
            const secondLink = thirdLevel ? `${topPage}/${secondLevel}` : location.pathname;

            nbreadcrumps.push({
                // @ts-ignore
                text: topLevelPage[topPage],
                link: firstLink
            })

            if (secondLevel) {

                nbreadcrumps.push({
                    // @ts-ignore
                    text: secondLevelPage[secondLevel],
                    link: secondLink
                })
            }

            setBreadcrumbs(nbreadcrumps)

        }

    }, [location.pathname])

    /**
     * add a breadcrumb at given level and removes the next level(s)
     */
    const addBreadcrumbold = (bread: Breadcrump, level: number = 3) => {

        const nbreadcrumps = breadcrumbs.slice(0, level - 1)
        nbreadcrumps.push(bread)
        setBreadcrumbs(nbreadcrumps)

    }

    /**
     * add a breadcrumb at given level
     */
    const addBreadcrumb = (bread: Breadcrump, level: number = 3) => {

        setBreadcrumbs((nbreadcrumps)=>{

            const bb = [...nbreadcrumps]
            bb[level-1] = bread
            return bb
        })


    }


    /**
     * removes a breadcrumb from given level
     */
    const removeBreadcrumb = (level: number = 3) => {

        setBreadcrumbs((nbreadcrumps)=>{
            const bb = [...nbreadcrumps]
            bb.pop()
            return bb
        })


    }



    /**
     * constructs new breadcrumbs overriding the old
     */
    const newBreadcrumbs = (bread: Breadcrump[]) => {
        setBreadcrumbs(bread)
    }



    return (
        <BreadcrumbsContext.Provider value={{
            breadcrumbs,
            addBreadcrumb,
            newBreadcrumbs,
            removeBreadcrumb
        }}>
            {props.children}
        </BreadcrumbsContext.Provider>
    );
};

export default BreadcrumbsContext;