import {useState, useEffect, useContext} from "react";
import {Link} from "react-router-dom";
import {Message} from '../../../models/Messages';
import {markAsReadMessages} from '../../../API/messages';
import Loader from '../../UI/Loader/Loader'
import MessagesReadContext from "../../../context/messagesRead-context";


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

const dictionary: IObjectKeys = {
    'support': 'category-color-support',
    'service is down': 'category-color-service-is-down',
    'service': 'category-color-service',
    'announcements': 'category-color-anakoinosi',
    'ΥΠΗΡΕΣΙΑ': 'category-color-ipiresia'
};

const NotificationPopup = () => {

    const {updateUnread, getUnreadMessages,resetUnreadMessages} = useContext(MessagesReadContext);
    const [messages, setMessages] = useState<Message[]>([]);

    const markAsReadMessagesAPI = async (id: number) => {
        /**
         * we remove the cached unread messages if we mark one as read
         * cause we will need to fetch the new unread message
         */
        resetUnreadMessages()
        // Make Call to mark as read on DB
        await markAsReadMessages(id);

        // Mark as read locally too
        // @ts-ignore
        const newMessages = [...messages];
        newMessages.map((item) => {
            if (item.id == id) {
                return item.is_read = 1;
            }
            return item;
        });
        setMessages(newMessages);
    };

    const getUnreadMessagesAPI = async () => {
        const mes = await getUnreadMessages()
        setMessages(mes);
    };

    useEffect(() => {
        getUnreadMessagesAPI();
    }, []);

    return (
        <div className="profile--dd-list" id="notification-popup">
            {
                messages && messages.length > 0 ?
                    messages.map((item, index) => {
                        let itemRead = item.is_read;
                        let itemCategory = item.tag;
                        const categoryColor = dictionary[itemCategory];

                        return (
                            // Notification popup - notification row  - date - category - title - read unread
                            <div className="profile--dd-list--wrapper row"
                                 onClick={(e) => {
                                     e.stopPropagation()
                                     markAsReadMessagesAPI(item.id)
                                     updateUnread();
                                 }
                                 }
                                 key={index}>
                                <div className="offset-xxl-2 gx-5 col-xxl-10 col-10 profile--dd-list--wrapper--date">

                                    <p>{'16/12/2022'}</p>
                                </div>
                                <div className="profile--dd-list--wrapper--main row col-12">
                                    <div className="col-2 profile--dd-list--wrapper--main--category">
                                        <span className={categoryColor}>{item.tag}</span>
                                    </div>
                                    <div className="col-xxl-9 col-11 gx-5 profile--dd-list--wrapper--main--title">
                                        <span className='title-black'>{item.title}</span>&nbsp;
                                        <span>{item.body}</span>
                                    </div>
                                    <div className="col-1 profile--dd-list--wrapper--main--state"
                                         id={itemRead ? 'read' : 'notRead'}>
                                        <span className="state-circle"></span>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                    :
                    <div className="loader-wrapper">
                        <Loader/>
                    </div>
            }


            {/* Notification popup - read more button */}
            <div className="profile--dd-list--wrapper--allNotifications row">
                <Link to="/messages">
                    <button>
                        <span>Όλες οι ειδοποιήσεις </span>
                    </button>
                </Link>
            </div>
        </div>

    )
}

export default NotificationPopup;