import './quickaccess.scss';
import React, {useContext, useState, useMemo, useEffect} from 'react';
import Modal from "../../UI/Modal/Modal";
import QuickAccessModalApp from './QuickAccessModalApp';
import AuthContext from '../../../context/auth-context';
import {toastInfo} from "../../../services/toaster";
import {normaliseGreek, debounce} from '../../../helpers/functions';
import timer from "../../../assets/images/qa-timer.svg";
import useTranslations from "../../../hooks/useTranslations";
import {Microservice} from "../../../models/EgovUser";

type QuickAccessProps = {
    appNumber?: number
    show: (state: boolean) => void
}


const QuickAccessModal = ({show}: QuickAccessProps) => {

    const context = useContext(AuthContext);
    const [searchValue, setSearchValue] = useState('');
    const {translateModule, translateMicroservice, translatePermission} = useTranslations()

    const handleAddClick = (message: string) => {

        toastInfo('Η εφαρμογή προστεθηκε με επιτυχία.');
    };

    const handleChange = (e: any) => {
        setSearchValue(e.target.value);
    };

    const debouncedResults = useMemo(() => {
        return debounce(handleChange, 300);
    }, []);

    useEffect(() => {
        return () => debouncedResults.cancel()
    }, [])

    return (
        <Modal close={() => show(false)} containerClass={'qa-modal-overlay'} closeBtn={true}
               modalHeaderTitle={'Quick Access'} modalHeaderImg={timer}>
            <div className="modal-searchbar-container">
                <input id="modal-search-bar" type="text"
                       placeholder="Πληκτρολογήστε εδώ για γρήγορη αναζήτηση υπηρεσίας" onChange={debouncedResults}/>
            </div>
            <div id="modal-apps" className="qa-modal-content-container">

                {
                    context.currentUser && (
                        context.currentUser.quickAccess.length === 10 ?
                            <p className={'text-center'}>Δεν μπορείτε να προσθέσετε άλλες υπηρεσίες</p>
                            :
                            context.currentUser.roles.map((role) => {
                                const role_per = context.currentUser?.permissions[role];
                                return role_per && Object.entries(role_per).map(([permission, {quick, default_view}]) => {

                                    const [application, service] = permission.split('.')
                                    const s = normaliseGreek(searchValue).toLowerCase();


                                    {/*@ts-ignore*/}
                                    const applicationSearch = normaliseGreek(translateMicroservice(application as Microservice)).toLowerCase();
                                    {/*@ts-ignore*/}
                                    const serviceSearch = normaliseGreek(translateModule(application + '.' + service)).toLowerCase();
                                    const isFav = context.currentUser!.quickAccess.includes(role + '.' + application + '.' + service)

                                    return (
                                        <>

                                            {(applicationSearch.includes(s) || serviceSearch.includes(s)) && !isFav &&
                                                <QuickAccessModalApp key={permission} application={application}
                                                                     service={service}
                                                                     role={role} addQuickAccess={() => {
                                                    context.addQuickAccess(role, permission)
                                                }} handleAddClick={handleAddClick}/>
                                            }

                                            {/*second loop is for subpages of modules that can be added in qa*/}
                                            {quick.filter(q => q !== default_view).map(quick => {
                                                // @ts-ignore
                                                const permissionSearch = normaliseGreek(translatePermission(application + '.' + service + '.' + quick)).toLowerCase();
                                                const isFavP = context.currentUser!.quickAccess.includes(role + '.' + application + '.' + service + '.' + quick)
                                                if ((applicationSearch.includes(s) || permissionSearch.includes(s)) && !isFavP) {
                                                    return (<QuickAccessModalApp key={permission + "." + quick}
                                                                                 application={application}
                                                                                 service={service}
                                                                                 role={role}
                                                                                 permission={quick}
                                                                                 addQuickAccess={() => {
                                                                                     context.addQuickAccess(role, permission + "." + quick)
                                                                                 }} handleAddClick={handleAddClick}/>
                                                    )
                                                }

                                            })}
                                        </>

                                    )

                                })

                            })
                    )
                }


            </div>
        </Modal>
    );
}

export default QuickAccessModal;