import './quickaccess.scss';
import React from 'react';
import addApp from "../../../assets/images/add.svg";
import useTranslations from "../../../hooks/useTranslations";
import {Microservice, Role} from "../../../models/EgovUser";


type QuickAccessModalProps = {
    role: string
    service: string
    application: string
    addQuickAccess: () => void
    handleAddClick: (message: string) => void
    permission?: string
}


const QuickAccessModalApp = ({
                                 role,
                                 service,
                                 application,
                                 addQuickAccess,
                                 handleAddClick,
                                 permission
                             }: QuickAccessModalProps) => {
    const serviceID = application + '.' + service;
    const {translateModule, translateMicroservice, translateRole, translatePermission} = useTranslations()

    return (
        <div className="qa-modal-app-container" onClick={addQuickAccess}>
            <div className="qa-modal-app">
                <p>
                    <span className="qa-app-role">{translateRole(role as Role)} </span>
                    <span>
                    {
                        permission ?
                            translatePermission(serviceID+'.'+permission)
                            :
                            translateModule(serviceID)
                    }

                </span>
                    <span> ({translateMicroservice(application as Microservice)})</span>
                </p>
                <img src={addApp} alt="add icon" onClick={() => handleAddClick('Η εφαρμογή προστεθηκε με επιτυχία.')}/>
            </div>
        </div>
    );
}

export default QuickAccessModalApp;