import React, {ReactNode, useContext} from 'react';
import SettingsIcon from "../SVG/SettingsIcon";
import PageTitle from "../UI/Typography/PageTitle";
import PageSubtitle from "../UI/Typography/PageSubtitle";
import useSettingsTree from "../../hooks/useSettingsTree";
import ModuleBox from "../UI/ModuleBox/ModuleBox";
import AuthContext from "../../context/auth-context";

type SettingsCategoryProps = {
    children?: ReactNode
}

const SettingsCategory = ({children}: SettingsCategoryProps) => {
    const {settingsCategory} = useSettingsTree()

    const {currentUser} = useContext(AuthContext)
    /**
     * required profile settings actions the user has completed or not
     */
    const profileSettings = currentUser?.profile_settings


    return (
        <>
            {settingsCategory &&
                <div>
                    <div className={'settings-cat-header mb-6'}>
                        <div className={'d-flex gap-3 align-items-center'}>
                            <SettingsIcon color={'#1a73e8'} width={'16.4px'} height={'18.66'}/>
                            <PageTitle>{settingsCategory!.view_name}</PageTitle>
                        </div>
                        <PageSubtitle>{settingsCategory!.description}</PageSubtitle>
                    </div>

                    <div className='row gy-4 gx-4'>
                        {
                            settingsCategory!.children && settingsCategory?.children.map(set => {

                                    const action = set?.action
                                    let tooltip:'pending' | 'complete' | '' = "";
                                    if (action) {
                                        tooltip =  (profileSettings && profileSettings[action]) ? 'complete' : 'pending'
                                    }

                                    return (
                                        <div className='col-clg-6' key={set.name}>
                                            <ModuleBox
                                                route={`/settings/${settingsCategory.name}/${set.name}`}
                                                title={set.view_name ?? "Missing Title"}
                                                subtitle={set.description ?? "Missing Description"}
                                                icon={set.icon}
                                                tooltip={tooltip}
                                            />
                                        </div>
                                    )
                                }
                            )
                        }
                    </div>
                </div>}
        </>

    );
}

export default SettingsCategory;