import React, {ReactNode, useContext, useEffect} from 'react';
import {Navigate, useNavigate, useParams} from "react-router-dom";
import useSettingsTree from "../hooks/useSettingsTree";

import BreadcrumbsContext from "../context/breadcrumbs-context";

type SettingPageProps = {
    children?: ReactNode
}

// const SettingsComponentMap = {
//     "profile.secondary-password": <SecondaryPassword/>,
//     "profile.dua-settings": <DUASettings/>,
//     "profile.avatar-management": <AvatarManagement/>,
//     "profile.authorizations": <Deals/>,
//     "profile.signatures": <DUASignatures/>,
//     "notifications.notifications": <NotificationsSettings/>,
// }


/**
 * checks if its a valid setting page
 * return to the correct setting page component
 */
const SettingPage = ({children}: SettingPageProps) => {

    const {settings_cat, setting} = useParams()
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const {isSetting, settingObject, settingsCategory} = useSettingsTree()
    const {addBreadcrumb} = useContext(BreadcrumbsContext)
    const navigate = useNavigate()

    useEffect(() => {

        if (!isSetting()) {

            navigate(`/settings/${settings_cat}`)
        }
        else{
            addBreadcrumb({
                text:settingObject!.view_name,
                link: `/settings/${settings_cat}/${setting}`
            })
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [setting])


    return (
        <>
            {
                // @ts-ignore
                settingObject ?
                    settingObject.component
                    : <Navigate to={`/settings/${settings_cat}`}/>
            }
        </>
    );
}

export default SettingPage;