import React, {ReactNode, useContext, useEffect, useRef, useState} from 'react';
import AuthContext from "../context/auth-context";
import {Microservice, Role} from "../models/EgovUser";
import {useParams} from "react-router-dom";
import EmergencyPassword from "../components/SVG/EmergencyPassword";
import SettingsIcon from "../components/SVG/SettingsIcon";
import SignatureIcon from "../components/SVG/SignatureIcon";
import UserAccountSettingsIcon from "../components/SVG/UserAccountSettingsIcon";
import AuthorizationsIcon from "../components/SVG/AuthorizationsIcon";
import AvatarManagementIcon from "../components/SVG/AvatarManagementIcon";


type SettingsTreeInterface = {
    name: string,
    view_name: string,
    description: string,
    children?: SettingsTreeInterface
    icon?: JSX.Element
    action?: string
}[]


const settingsTree: SettingsTreeInterface = [
    {
        name: 'profile',
        view_name: 'Ρυθμίσεις Προφίλ',
        description: 'Ενημερώστε & ανανεώστε τα στοιχεία σας.',
        icon: <SettingsIcon width={"41.982"} height={"37.021"} color={'#1a73e8'}/>,
        children: [
            {
                name: 'secondary-password',
                view_name: 'Κωδικος Έκτακτης Ανάγκης',
                description: 'Εξασφαλίστε απρόσκοπτη πρόσβαση σε όλες τις υπηρεσίες της D.U.A. Platform',
                icon: <EmergencyPassword/>,
                action: 'hasEmergencyPassword'
            },
            {
                name: 'dua-settings',
                view_name: 'Demokritos User Account (D.U.A)',
                description: 'Δείτε τα στοιχεία του Demokritos User Account (D.U.A.) που έχετε επιβεβαιώσει κατά το Activation του D.U.A.',
                icon: <UserAccountSettingsIcon color={'#1a73e8'}/>,
            },
            {
                name: 'avatar-management',
                view_name: 'Φωτογραφία Προφίλ',
                description: 'Ανανεώστε τη φωτογραφία προφίλ σας',
                icon: <AvatarManagementIcon color={'#1a73e8'}/>,
            },
            {
                name: 'authorizations',
                view_name: 'Εξουσιοδοτήσεις',
                description: 'Εξουσιοδοτήστε D.U.A. χρήστη να υολοποιεί ενέργεις εκ μέρους σας.',
                icon: <AuthorizationsIcon color={'#1a73e8'}/>,
            },
            {
                name: 'signatures',
                view_name: 'Υπογραφές',
                description: 'Δημιουργήστε υπογραφές που θα χρησιμοποιήσετε ανά περίπτωση',
                icon: <SignatureIcon width="40.214" height="34.032" color={'#1a73e8'}/>,
            },
        ],

    },
    // {
    //     name: 'reminders',
    //     view_name: 'Ρυθμίσεις Υπενθυμίσεων',
    //     description: 'Ρυθμίστε τις επιλογές',
    //     children: []
    // },
]

const useSettingsTree = () => {

    useEffect(()=>{
        console.log('USE SETTINGS HOOK RENDER')
    },[])



    const {settings_cat, setting} = useParams()

    /**
     * returns true if the target exists in first level of settingstree
     */
    const isSettingCat = () => {
        return settings_cat && settingsTree.some(s_cat => s_cat.name === settings_cat)
    }

    /**
     * returns true if the target exists in the second level
     */
    const isSetting = () => {
        const cat = getSettingsCat()
        if (!cat || !cat.children) return false
        return cat.children.some(set => set.name === setting)
    }

    /**
     * returns the category object from settingsTree base on the url
     */
    const getSettingsCat = () => {
        return settingsTree.find(s_cat => s_cat.name === settings_cat)
    }

    return {
        isSettingCat,
        isSetting,
        settingsCategory:getSettingsCat(),
        settings_categories: settingsTree

    } as const

}

export default useSettingsTree;