import React, {ReactNode, useContext, useState} from 'react';
import {Microservice} from "../../models/EgovUser";
import AuthContext from "../../context/auth-context";
import {useNavigate, useParams} from "react-router-dom";
import NewsArticle from "../UI/NewsArticle/NewsArticle";
import SettingBox from "../Settings/SettingBox/SettingBox";
import defaultModuleIcon from "../../assets/images/moduleIconContactsSearch.svg";
import useTranslations from "../../hooks/useTranslations";
import * as test from "../../helpers/translations2"
import {ApplicationsBannerTranslations, ApplicationsLongDescTranslations} from "../../helpers/translations2";

type ApplicationProps = {
    children?: ReactNode
}

const Application = ({children}: ApplicationProps) => {




    const {
        translateRole,
        translateMicroservice,
        translateModule,
        translateModuleDesc,
        translateModuleIcon,
    } = useTranslations()
    const {application} = useParams();
    const {currentUser} = useContext(AuthContext);
    const navigate = useNavigate()

    const newsArticle = {
        // @ts-ignore
        image: ApplicationsBannerTranslations[application as Microservice],
        // @ts-ignore
        title: 'All in One Go',
        // @ts-ignore
        subtitle: translateMicroservice(application) + ' for Demokritos',
        // @ts-ignore
        content: ApplicationsLongDescTranslations[application as Microservice],
    }

    return (
        <div id="Services">
            <section className="row gy-3 news-container">
                <NewsArticle
                    image={newsArticle.image}
                    title={newsArticle.title}
                    subtitle={newsArticle.subtitle}
                    content={newsArticle.content}
                />
            </section>
            <section className="row gy-3">
                {
                    currentUser && currentUser.roles.map((role, index) => {
                            const role_per = currentUser?.permissions[role]
                            return role_per && Object.keys(role_per).map((permission, subIndex) => {

                                const [micro_service, module] = permission.split('.')
                                if (micro_service === application) {
                                    // @ts-ignore
                                    const icon = translateModuleIcon(micro_service.concat('.', module));

                                    const roleViewName = translateRole(role)

                                    // @ts-ignore
                                    const moduleViewName = translateModule(micro_service.concat('.', module))
                                    const moduleDescription = translateModuleDesc(micro_service.concat('.', module))

                                    return (
                                        <div className='col-clg-6 col-cxxl-4' key={`${role}.${module}.${index}.${subIndex}`}>

                                            <SettingBox
                                                hypertitle={roleViewName}
                                                title={moduleViewName}
                                                subtitle={moduleDescription}
                                                icon={icon ? <img src={icon}/> : <img src={defaultModuleIcon}/>}
                                                route={`/applications/${micro_service}/services/${module}?activeRole=${role}`}
                                            />
                                            {/*<ServiceBox*/}
                                            {/*    withRole={true}*/}
                                            {/*    role={role}*/}
                                            {/*    microservice={micro_service as Microservice}*/}
                                            {/*    module={module}*/}
                                            {/*    icon={icon && <img src={icon}/>}*/}
                                            {/*    theme={"application"}*/}
                                            {/*/>*/}
                                        </div>
                                    )
                                }
                                return null;
                            })
                        }
                    )
                }
            </section>
        </div>
    );
}

export default Application;