import React, {ReactNode, useContext} from 'react';
import {useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
import {ApplicationsLogoTranslations} from "../../../helpers/translations2";
import SelectItem from "../../UI/CustomSelect/SelectItem";
import CustomRadioSelect from "../../UI/CustomSelect/CustomRadioSelect";
import AuthContext from "../../../context/auth-context";
import {Microservice} from "../../../models/EgovUser";
import useTranslations from "../../../hooks/useTranslations";

type ServiceHeaderProps = {
    children?: ReactNode
}

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

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

    /**
     * for the settings pages
     *
     */
    const {currentUser} = useContext(AuthContext)
    const activeRole = useSearchParams()[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

    return (
        <>
            <div className={"d-flex justify-content-between service-header"}>


                <div id={'msDropdown'}>
                    <CustomRadioSelect
                        theme={'service-header'}
                        value={application}
                        handleChange={(value) => {
                            navigate({
                                pathname: `applications/${value}`,
                            });
                        }}>
                        {
                            myApplications!.map(app => {

                                    return (
                                        <SelectItem value={app} key={app}>
                                            {/*@ts-ignore*/}
                                            <img height="24" src={ApplicationsLogoTranslations[app as Microservice]}
                                                 alt={app}/>
                                        </SelectItem>
                                    )
                                }
                            )
                        }
                    </CustomRadioSelect>
                </div>


                <div style={{
                    minWidth: '400px'
                }}>
                    <CustomRadioSelect
                        theme={'service-header'}
                        value={currentService}
                        handleChange={(role_ser) => {
                            const [role, service] = role_ser.split('.')
                                navigate({
                                    pathname: `applications/${application}/services/${service}`,
                                    search: `?activeRole=${role}`,
                                });

                        }}>
                        {
                            myServices!.map(ser => {
                                    const [role, service, right] = ser.split('.');
                                    return (
                                        <SelectItem value={role + '.' + service} key={role + '.' + service}>
                                            {/*@ts-ignore*/}
                                            <b>{translateRole(role)}</b>
                                            <span> - {translateModule(application + '.' + service)} </span>
                                        </SelectItem>
                                    )
                                }
                            )
                        }
                    </CustomRadioSelect>
                </div>

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