import React, {PropsWithChildren, useContext, useEffect, useMemo, useState} from "react";
import * as readAPI from "../API/messages";
import Pusher from 'pusher-js';
import {toastInfo} from "../services/toaster";
import {Message} from "../models/Messages";
import authContext from "./auth-context";


/**
 * this context is only needed for the popup
 */


interface MessagesReadContextInterface {
    unread: number
    updateUnread: () => void
    resetUnread: () => void
    resetUnreadMessages: ()=>void
    getUnreadMessages: () => Promise<Message[]>
}

const MessagesReadContext = React.createContext({} as MessagesReadContextInterface);

export const MessagesReadContextProvider: React.FC<PropsWithChildren> = (props) => {
    const [unread, setUnread] = useState(0);
    const [unreadMessages, setUnreadMessages] = useState<Message[] | null>(null)
    const {currentUser} = useContext(authContext)
    useEffect(() => {
        /***
         *GET UNREAD MESSAGES COUNT
         */
        (async () => {
            const response = await readAPI.getUnreadMessages();
            // @ts-ignore
            setUnread(response.data.metadata.total_count);
            // @ts-ignore
            setUnreadMessages(response.data.records)
        })();

        /***
         * SETUP PUSHER
         */
        (async () => {

            const pusher = new Pusher('609237add79f70ed29d6', {
                cluster: 'eu',
                // @ts-ignore
                encrypted: true
            });

            const channel = pusher.subscribe('broadcast-channel');

            channel.bind('my-event', (data:any) => {

                if (!currentUser) return
                if (data.recipients.split(',').includes(currentUser.id.toString())){
                    //set unread messages as null, since we need to fetch them again
                    setUnreadMessages(null)
                    setUnread((unread)=>unread+1)
                    toastInfo('Έχετε ένα νέο μήνυμα')

                }

            });
        })();
    },[]);

    const getUnreadMessages = async () => {
        if (unreadMessages) return unreadMessages
        const res = await readAPI.getUnreadMessages();
        // @ts-ignore
        setUnreadMessages(res.data.records);
        // @ts-ignore
        return res.data.records
    }

    const memoValue = useMemo(()=>({
            getUnreadMessages: getUnreadMessages,
            unread: unread,
            resetUnreadMessages: () => {
                setUnreadMessages(null)
            },
            updateUnread: () => setUnread((unread)=>unread-1), //marks message as undread =>   decreases counter
            resetUnread: () => setUnread(0) //mark all as read => unread count == 0
        }
    ), [unread])

    return (
        <MessagesReadContext.Provider
        value={memoValue}>
        {props.children}
        </MessagesReadContext.Provider>
    )
};

export default MessagesReadContext;