import React, {ReactNode, useContext, useEffect} from 'react';
import {Outlet, useNavigate, useParams} from "react-router-dom";
import useSettingsTree from "../hooks/useSettingsTree";
import NotificationsSettings from "../components/Settings/NotificationsSettings/NotificationsSettings";
import BreadcrumbsContext from "../context/breadcrumbs-context";

type SettingsCategoryPageProps = {
    children?: ReactNode
}


/**
 * settings/ {setting category}
 * checks if its a valid category page or redirects
 */
const SettingsCategoryPage = ({children}: SettingsCategoryPageProps) => {

    const {settings_cat} = useParams()
    const {isSettingCat, settingsCategory} = useSettingsTree()
    const navigate = useNavigate()
    const {newBreadcrumbs} = useContext(BreadcrumbsContext)

    useEffect(() => {

        if (!isSettingCat()) {
            navigate('/settings')
        } else {
            newBreadcrumbs(
                [{
                    // @ts-ignore
                    text: 'Ρυθμίσεις',
                    link: `/settings`
                }
                    , {
                    // @ts-ignore
                    text: settingsCategory.view_name,
                    link: `/settings/${settings_cat}`
                }])
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [settings_cat])


    return (
        <>
            {
                settingsCategory && settingsCategory.isPage ?
                    <NotificationsSettings/>
                    :
                    <Outlet/>

            }
        </>
    );
}

export default SettingsCategoryPage;