import React, {ReactNode, useEffect} from 'react';
import {useNavigate, useParams, Navigate} from "react-router-dom";
import SecondaryPassword from "../components/Settings/ProfileSettings/SecondaryPassword/SecondaryPassword";
import useSettingsTree from "../hooks/useSettingsTree";
import Authorizations from "../components/Settings/ProfileSettings/Authorizations/Authorizations";
import SignatureIcon from "../components/SVG/SignatureIcon";
import DUASignatures from "../components/Settings/ProfileSettings/DUASignatures/DUASignatures";
import AvatarManagement
    from "../components/Settings/ProfileSettings/AvatarManagement/AvatarManagementContainer/AvatarManagement";
import DUASettings from "../components/Settings/ProfileSettings/DUASettings/DUASettings";

type SettingPageProps = {
    children?: ReactNode
}

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

const SettingPage = ({children}: SettingPageProps) => {

    const {settings_cat, setting} = useParams()
    const {isSetting} = useSettingsTree()
    const navigate = useNavigate()

    useEffect(() => {
        if (!isSetting()) {

            navigate(`/settings/${settings_cat}`)
        }
    }, [setting])


    return (
        <>
            {
                // @ts-ignore
                SettingsComponentMap[`${settings_cat}.${setting}`] ?? <Navigate to={`/settings/${settings_cat}`}/>
            }
        </>
    );
}

export default SettingPage;