import React, { useCallback, useContext, useEffect, useRef, useState, } from 'react';
import { useMessageBroker } from '../../hooks/useMessageBroker';
import { makeStyles } from '../../shared/makeStyles';
import { GameLogContext, isMessage } from '../GameLogContextProvider';
import { GameLogNotification } from '../GameLogNotification';
export var NotificationPosition;
(function (NotificationPosition) {
    NotificationPosition["TOP"] = "top";
    NotificationPosition["BOTTOM"] = "bottom";
})(NotificationPosition || (NotificationPosition = {}));
const getLocalStorageLastMessageTime = (characterId) => {
    let lastMessageTime = 0;
    try {
        const lsLastMessageTime = localStorage.getItem(`gameLog-lastMessageTime-${characterId}`);
        if (lsLastMessageTime) {
            lastMessageTime = parseInt(lsLastMessageTime, 10);
        }
    }
    catch (error) {
        console.error(error);
    }
    return lastMessageTime;
};
const setLocalStorageLastMessageTime = (userId, lastMessageTime) => {
    try {
        localStorage.setItem(`gameLog-lastMessageTime-${userId}`, lastMessageTime.toString());
    }
    catch (error) {
        console.error(error);
    }
};
const useStyles = makeStyles()(() => ({
    '@keyframes game-log-notification-fade-in': {
        from: {
            opacity: 0,
        },
        to: {
            opacity: 1,
        },
    },
    Notification: {
        position: 'relative',
        display: 'inline-block',
    },
    NewMessage: {
        borderRadius: '20px',
        backgroundColor: '#409bff',
        width: '10px',
        height: '10px',
        border: '1px solid rgb(231, 231, 231)',
        position: 'absolute',
        right: '-4px',
        top: '-4px',
        animation: '$game-log-notification-fade-in ease-in 1',
        animationDuration: '200ms',
        animationFillMode: 'forwards',
    },
}));
export const GameLogNotificationWrapper = ({ children, themeColor, gameLogIsOpen, delay = 5000, 
// TODO: implement position
position: _position = NotificationPosition.TOP, notificationOnClick, isCharacterBuilder, }) => {
    const [{ entityId }] = useContext(GameLogContext);
    const { classes } = useStyles();
    const notificationWrapperRef = useRef(null);
    const [savedLastMessageTime, setSavedLastMessageTime] = useState(getLocalStorageLastMessageTime(entityId !== null && entityId !== void 0 ? entityId : ''));
    const [message, setMessage] = useState(null);
    const [lastMessageTime, setLastMessageTime] = useState(0);
    useEffect(() => {
        const currentTime = new Date().getTime();
        setSavedLastMessageTime(currentTime);
        setLocalStorageLastMessageTime(entityId !== null && entityId !== void 0 ? entityId : '', currentTime);
        setMessage(null);
    }, [entityId, gameLogIsOpen]);
    //set timer after every message to disable it after x seconds.
    useEffect(() => {
        const timer = setTimeout(() => {
            setMessage(null);
        }, delay);
        return () => clearTimeout(timer);
        // message is here so when a new message comes in we reset the timer.
    }, [delay, message]);
    useMessageBroker(useCallback((message) => {
        if (!isMessage(message)) {
            return;
        }
        const parsedDateTime = parseInt(message.dateTime, 10);
        // checks if the message is a persist message and is recent enough to show
        if (message.persist &&
            savedLastMessageTime < parsedDateTime &&
            message.eventType === 'dice/roll/fulfilled' &&
            (message.entityType === 'character' || message.entityType === 'user')) {
            setMessage(message);
            setLastMessageTime(parsedDateTime);
        }
    }, [savedLastMessageTime]));
    return (React.createElement("div", { className: classes.Notification, ref: notificationWrapperRef },
        !gameLogIsOpen && (React.createElement(React.Fragment, null,
            !isCharacterBuilder && savedLastMessageTime < lastMessageTime && (React.createElement("div", { className: classes.NewMessage })),
            message && (React.createElement(GameLogNotification, { message: message, themeColor: themeColor, notificationWrapperRef: notificationWrapperRef.current, notificationOnClick: notificationOnClick })))),
        children));
};
//# sourceMappingURL=GameLogNotificationWrapper.js.map