import React, {ReactNode, useContext} from 'react';
import {useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
import SelectItem from "../../UI/Forms/CustomSelect/SelectItem";
import CustomRadioSelect from "../../UI/Forms/CustomSelect/CustomRadioSelect";
import AuthContext from "../../../context/auth-context";
import {Microservice} from "../../../models/EgovUser";
import useTranslations from "../../../hooks/useTranslations";
import defaultAppLogo from "../../../assets/images/logo-rectangle-egov.svg";
import {useEncodedParams} from "../../../hooks/useEncodedParams";
import {encodeParams} from "../../../helpers/encodedParams";

type ServiceHeaderProps = {
    children?: ReactNode
}

const ELEVATED_ROLES = ['scientific_supervisor', 'project_manager', 'supervisor_elke', 'director', 'president'];

const ServiceHeader = ({children}: ServiceHeaderProps) => {
    const {
        translateModule,
        translateRole,
        translateMicroserviceIcon,
        translateMicroservice,
    } = useTranslations()

    let location = useLocation();
    let {application, service} = useParams();

    /**
     * for the settings pages
     *
     */
    const {currentUser} = useContext(AuthContext)
    const activeRole = useEncodedParams()[0].get("activeRole") || 'dua_user'
    const navigate = useNavigate()
    const myServices = currentUser!.microservice_permissions[application as Microservice]
    const myApplications = Object.keys(currentUser!.microservice_permissions)
    const currentService = activeRole + '.' + service

    const workRelationId = currentUser?.work_relation_id;

    const hasElevatedRole = currentUser!.roles.some(role => ELEVATED_ROLES.includes(role));

    const hasVisibleModules = (ms: string): boolean => {
        if (ms === 'difo' && activeRole === 'hr_manager') return true;
        if (ms === 'rescom' && activeRole === 'dua_user') return true;
        return currentUser!.roles.some(role => {
            const role_per = currentUser!.permissions[role];
            if (!role_per) return false;

            return Object.entries(role_per).some(([permission, moduleObject]) => {
                const [micro_service, module] = permission.split('.');
                if (micro_service !== ms) return false;

                if (
                    (micro_service === "difo" && workRelationId === 1 && module === "personal_folder") ||
                    (micro_service === "difo" && workRelationId === 1 && role === 'dua_user' && module === "alfa_ena") ||
                    (micro_service === "hr_support" && workRelationId === 2 && module === "personal_folder")
                ) return false;

                // @ts-ignore
                if (!moduleObject.permissions.includes("list")) return false;

                return true;
            });
        });
    };

    return (
        <>
            <div className={"d-flex justify-content-between align-items-start flex-column flex-xl-row gap-3 service-header"}>


                <div id={'msDropdown'} >
                    <CustomRadioSelect
                        theme={'service-header'}
                        value={application}
                        // disabled={myApplications.length <= 1}
                        handleChange={(value) => {
                            navigate({
                                pathname: `applications/${value}`,
                            });
                        }}>
                        {
                            myApplications
                                .filter(app => app !== 'settings')
                                .filter(app => hasVisibleModules(app))  // 👈
                                .map(app => {
                                        // @ts-ignore
                                        const imgExist = translateMicroserviceIcon(app) && translateMicroserviceIcon(app).includes('/logos')
                                        // @ts-ignore
                                        const msViewName = translateMicroservice(app)
                                        return (
                                            <SelectItem
                                                disabled={(app == 'rescom' && !hasElevatedRole)||(app == 'difo' && (workRelationId !== 2 && !hasElevatedRole))}
                                                value={app} key={app}>
                                                {/*@ts-ignore*/}
                                                {imgExist ? <img src={translateMicroserviceIcon(app)} alt={app}/> : <><img width={'16px'} src={defaultAppLogo}/> <p className={'defaultapplicationname'}>  {msViewName}</p></>}
                                            </SelectItem>
                                        )
                                    }
                                )
                        }
                    </CustomRadioSelect>
                </div>

                {
                    service && myServices &&
                    <div className="services-select-container">
                        <CustomRadioSelect
                            theme="service-header"
                            value={currentService}
                            disabled={myServices.length <= 1}
                            handleChange={(role_ser) => {
                                const [role, service] = role_ser.split('.');
                                navigate({
                                    pathname: `applications/${application}/services/${service}`,
                                    search: `?t=${encodeParams({ activeRole: role })}`,
                                });
                            }}
                        >
                            {myServices.map((ser) => {
                                const [role, serviceName] = ser.split('.');
                                const value = `${role}.${serviceName}`;

                                // Get permissions for this module
                                // @ts-ignore
                                const modulePermissions = currentUser?.permissions?.[role]?.[`${application}.${serviceName}`];

                                const hasListPermission = modulePermissions?.permissions?.includes("list");
                                const isSelected = value === currentService;
                                if (
                                    (application === "difo" && currentUser?.work_relation_id === 1  && serviceName === "personal_folder" && !isSelected) ||
                                    (   application === "difo" && currentUser?.work_relation_id === 1  && serviceName === "alfa_ena" && !isSelected && role == 'dua_user') ||
                                    (application === "hr_support" && currentUser?.work_relation_id === 2 && serviceName === "personal_folder" && !isSelected)
                                ) {
                                    return null;
                                }
                                // If no permission AND not selected, skip rendering
                                if (!hasListPermission && !isSelected){ return null;}

                                return (
                                    <SelectItem
                                        disabled={application === "difo" && currentUser?.work_relation_id === 1  && serviceName === "personal_folder"}
                                        value={value} key={value}>
                                        {/*@ts-ignore*/}
                                        <b>{translateRole(role)}</b>
                                        <span> - {translateModule(`${application}.${serviceName}`)}</span>
                                    </SelectItem>
                                );
                            })}
                        </CustomRadioSelect>
                    </div>
                }


            </div>
        </>
    );
}
export default ServiceHeader;