import garbage_blue from "../../../assets/images/garbage-blue.png";
import garbage_white from "../../../assets/images/garbage-white.svg";
import {EgovNotification} from "../../../models/EgovNotifications";
import {useContext, useEffect, useRef, useState} from "react";
import {LinkWithRole} from "../../HOC/LinkWithRole";
import AuthContext from "../../../context/auth-context";
// import { encodeParams } from "../../../helpers/encodedParams";
// import { useNavigate } from 'react-router-dom';
// import useRole from "../../../hooks/useRole";

interface IObjectKeys {
    [key: string]: string;
}


type MessageBoxProps = {
    notification: EgovNotification
    marksAsRead: (id: number) => void,
    onDelete: (id: number, isRead: 0 | 1) => void,
};


const colorTagMap: Record<string, string> = {
    'support': 'var(--category-support)',
    'announcements':'var(--category-announcements)',
    'personal': 'var(--category-personal)',
    'service': 'var(--category-service)',
    'dpass': 'var(--category-dpass)',
    'anakoinosi': 'var(--category-anakoinosi)',
    'net support': 'var(--category-net-support)',
    'service is down': 'var(--category-service-is-down)',


}

const NotificationBox = (
    {
        notification, marksAsRead, onDelete
    }: MessageBoxProps) => {

    const [hasDeleted, setHasDeleted] = useState(false)
    const delRef = useRef(null)
    // const navigate = useNavigate();
    // const activeRole = useRole();

    useEffect(() => {


        const handleClick = (e: any) => {
            if (hasDeleted) {
                if (e.source && e.source.current === delRef.current) return
                setHasDeleted(false)
            }
        }
        window.addEventListener('click', handleClick)
        return () => {
            window.removeEventListener('click', handleClick)
        }
    }, [hasDeleted]);
    /*preparation for notification link to proper service*/
    const {currentUser} = useContext(AuthContext);
    const uniqueMicroservices = (Object.keys(currentUser!.microservice_permissions));
    const uniqueRoles = (Object.values(currentUser!.roles));
    const isTagInArray = notification.tag && uniqueMicroservices.includes(notification.tag) && notification.role && uniqueRoles.includes(notification.role) && notification.module ;

    return (
        <div className="messages-wrapper">
            {/* messages container - messages list */}
            <div className='messages-wrapper--fsection col-md-4 col-lg-3 col-xxl-2'>
                <div className="row min-height">
                    <div
                        ref={delRef}
                        className='messages-wrapper--fsection--bin col-3'
                        onClick={(e) => {
                            // @ts-ignore
                            e.nativeEvent.source = delRef
                            setHasDeleted(true)
                        }
                        }>
                            <span>
                                <img src={garbage_blue} alt='bin icon'/>
                            </span>

                        <div className={`delete-overlay ${hasDeleted ? 'open' : 'close'}`}>
                            {/* messages container - message item */}
                            <div className="d-flex align-items-center h-100 justify-content-center">

                                {/* messages container - delete question */}
                                <div className="garbage-bin-deleted d-flex align-items-center">
                                    <img width='20' height='22' src={garbage_white} alt='garbage white icon'/>
                                </div>

                                <div
                                    className="messages-wrapper--del--to-be--row--deleted--text d-flex align-items-center">
                                    <span className="delete-msg">Να το αφαιρέσω;</span>
                                </div>

                                <div className="messages-wrapper--del--to-be--row--deleted--actions d-flex">
                                    {/* messages container - delete */}
                                    <button onClick={() => {
                                        onDelete(notification.id, notification.is_read)
                                    }}>
                                        Ναι
                                    </button>
                                    {/* messages container - messages list - cancel */}
                                    <button onClick={(e) => {
                                        e.stopPropagation()
                                        setHasDeleted(false)
                                    }}>
                                        Όχι
                                    </button>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div className='messages-wrapper--fsection--cat col-9'>
                            <span style={{backgroundColor: colorTagMap[notification.tag]}}>
                                {notification.tag}
                            </span></div>
                </div>
            </div>
            {/* messages container - read / unread */}
            <div className='messages-wrapper--secsection col-md-8 col-lg-9 col-xxl-10'
                    onClick={() => {
                        if (!notification.is_read) {
                        marksAsRead(notification.id)
                        }
                    }}>
                <div className="row min-height">
                    <div className='messages-wrapper--secsection--date col-12'>
                        <span>{notification.published_at}</span>
                    </div>
                    {/*preparation for notification link to proper service*/}
                        {/* <div className={'messages-wrapper--secsection--title col-11'} onClick={() => {
                            notification.tag === 'difo' && (activeRole === 'project_manager' || activeRole === 'scientific_supervisor') ? (
                            navigate(`/applications/difo/services/alfa_ena/${notification.issuer_id}?t=${encodeParams({ activeRole: activeRole })}`, {replace:true})
                            )
                            :
                            navigate(`/applications/${notification.tag}/services/${notification.module}`, {replace:true})
                    }}>
                        {isTagInArray ? (
                                <>
                                <span className="title-black">{notification.title}</span>&nbsp;
                                <span>{notification.body}</span>
                                </>

                        ) : (
                            <>
                                <span className='title-black'>{notification.title}</span>&nbsp;
                                <span>{notification.body}</span>
                            </>
                        )}
                    </div> */}
                    {/*preparation for notification link to proper service*/}
                    <div className={'messages-wrapper--secsection--title col-11'}>
                        {isTagInArray ? (
                            <LinkWithRole
                                inheritRole={notification.role}
                                to={
                                    ( notification.tag === 'dpass' && notification.role === 'hr_support' ||notification.tag === 'difo')
                                        ? ``
                                    : `/applications/${notification.tag}/services/${notification.module}`
                                }
                                >
                                <span className="title-black">{notification.title}</span>&nbsp;
                                <span>{notification.body}</span>
                            </LinkWithRole>
                        ) : (
                            <>
                                <span className='title-black'>{notification.title}</span>&nbsp;
                                <span>{notification.body}</span>
                            </>
                        )}
                    </div>
                    <div className='messages-wrapper--secsection--state col-1'
                            id={notification.is_read ? 'read' : 'notRead'}>
                        <span className="state-circle"></span>
                    </div>
                </div>
            </div>
        </div>
    )


};

export default NotificationBox;