import React, { Fragment, useContext, useEffect, useMemo, useRef, useState, } from 'react';
import ReactDOM from 'react-dom';
import { makeStyles } from '../../shared/makeStyles';
import { GameLogContext } from '../GameLogContextProvider';
import { GameLogNotificationMessage } from '../GameLogNotificationMessage';
import { getMessageName } from '../../helpers/getMessageName';
const maskImageSvg = `\
	<svg xmlns='http://www.w3.org/2000/svg' height='31' width='28'>
		<path d='M14 0L0 7.5V22.7L14 30.2L27 23.2L28 22.6V7.5L14 0ZM12 8.3L6.1 17.1L2.4 9.1L12 8.3ZM8 18L14 8.9L20 18H8ZM21.8 17.1L16 8.3L25.5 9L21.8 17.1ZM15 2.8L22.4 6.8L15 6.2V2.8ZM13 2.8V6.2L5.6 6.8L13 2.8ZM2 12.8L4.7 18.8L2 20.4V12.8ZM3 22.1L5.7 20.5L10.1 26L3 22.1ZM8 20H19L14 27.5L8 20ZM17.9 25.9L22.3 20.4L25 22L17.9 25.9ZM23.5 18.9L23.3 18.8L26 12.8V20.4L23.5 18.9Z' />
	</svg>
`
    .split('\n')
    .map((line) => line.trim())
    .join('');
const useStyles = makeStyles()(({ gameLog: { fontRoboto } }) => ({
    '@keyframes game-log-notification-bounce-in-down': {
        from: {
            WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
            animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
        },
        '60%': {
            WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
            animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
            opacity: 1,
            WebkitTransform: 'translate3d(0, 25px, 0)',
            transform: 'translate3d(0, 25px, 0)',
        },
        '75%': {
            WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
            animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
            WebkitTransform: 'translate3d(0, -10px, 0)',
            transform: 'translate3d(0, -10px, 0)',
        },
        '90%': {
            WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
            animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
            WebkitTransform: 'translate3d(0, 5px, 0)',
            transform: 'translate3d(0, 5px, 0)',
        },
        to: {
            WebkitAnimationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
            animationTimingFunction: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
            WebkitTransform: 'translate3d(0, 0, 0)',
            transform: 'translate3d(0, 0, 0)',
        },
        '0%': {
            opacity: 0,
            WebkitTransform: 'translate3d(0, -3000px, 0)',
            transform: 'translate3d(0, -3000px, 0)',
        },
    },
    NotRoot: {
        position: 'fixed',
        top: 0,
        left: 0,
        zIndex: 9999999999,
    },
    Notification: {
        display: 'flex',
        position: 'relative',
        justifyContent: 'center',
    },
    MessageRoot: {
        width: 'auto',
        position: 'absolute',
        display: 'flex',
        flexFlow: 'column',
        alignItems: 'center',
        animation: '$game-log-notification-bounce-in-down ease-in 1',
        animationDuration: '400ms',
        animationFillMode: 'forwards',
        cursor: 'pointer',
    },
    Message: {
        textTransform: 'uppercase',
    },
    MessageWrapper: {
        borderRadius: '16px',
        height: '55px',
        minHeight: '55px',
        overflow: 'hidden',
        backgroundColor: '#fff',
        color: '#738694',
        padding: '8px 10px 8px 8px',
        zIndex: 1,
        boxShadow: '0 0 10px #242424',
        alignItems: 'center',
        display: 'flex',
        fontSize: '12px',
        fontWeight: 700,
        fontFamily: fontRoboto,
        textTransform: 'uppercase',
        border: '1px solid #e7e7e7',
    },
    MessageCarrot: {
        borderTop: '10px solid #fff',
        borderLeft: '10px solid transparent',
        borderRight: '10px solid transparent',
        textAlign: 'center',
        width: 0,
        marginTop: '-1px',
        zIndex: 2,
        animation: '$game-log-notification-bounce-in-down ease-in 1',
        animationDuration: '400ms',
        animationFillMode: 'forwards',
    },
    MessageIcon: {
        left: 0,
        width: '42px',
        height: '42px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: '25px',
    },
    MessageContent: {
        whiteSpace: 'nowrap',
        marginLeft: '10px',
        alignItems: 'center',
        display: 'flex',
    },
    MessageTotal: {
        fontSize: '24px',
        borderLeft: '1px solid #8a9ba8',
        color: '#202b33',
        padding: '0 5px 0 10px',
        marginLeft: '5px',
    },
    'Message-right': {
        left: 0,
    },
    'Message-left': {
        right: 0,
    },
    MessageIconDie: {
        marginLeft: '4px',
        maskImage: `url("data:image/svg+xml;utf8,${maskImageSvg}")`,
        WebkitMaskImage: `url("data:image/svg+xml;utf8,${maskImageSvg}")`,
        maskRepeat: 'no-repeat',
        WebkitMaskRepeat: 'no-repeat',
        height: '32px',
        width: '32px',
        display: 'inline-block',
        backgroundColor: '#fff',
    },
    GameLive: {
        color: '#000',
        whiteSpace: 'pre',
        marginRight: '10px',
    },
}));
export const GameLogNotification = ({ message, themeColor, notificationWrapperRef, notificationOnClick, }) => {
    var _a, _b;
    const { classes, cx } = useStyles();
    const messageRootRef = useRef(null);
    const GameLogNotificationContainer = useMemo(() => {
        const rootElement = document.createElement('div');
        rootElement.classList.add(classes.NotRoot);
        return rootElement;
    }, [classes.NotRoot]);
    const [{ activeCampaign, activeCharacters, activePlayers }] = useContext(GameLogContext);
    const [box, setBox] = useState(notificationWrapperRef === null || notificationWrapperRef === void 0 ? void 0 : notificationWrapperRef.getBoundingClientRect());
    const [messageRootBox, setMessageRootBox] = useState((_a = messageRootRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect());
    useEffect(() => {
        document.body.appendChild(GameLogNotificationContainer);
        return () => {
            document.body.removeChild(GameLogNotificationContainer);
        };
    }, [GameLogNotificationContainer]);
    useEffect(() => {
        const int = setInterval(() => {
            var _a;
            setBox(notificationWrapperRef === null || notificationWrapperRef === void 0 ? void 0 : notificationWrapperRef.getBoundingClientRect());
            setMessageRootBox((_a = messageRootRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect());
        }, 10);
        return () => clearInterval(int);
    }, [notificationWrapperRef]);
    const getTop = (root, box, offset) => { var _a, _b; return Math.max(((_a = box === null || box === void 0 ? void 0 : box.top) !== null && _a !== void 0 ? _a : 0) - ((_b = root === null || root === void 0 ? void 0 : root.height) !== null && _b !== void 0 ? _b : 0) + offset, 0); };
    const getLeft = (root, box, offset) => {
        var _a, _b, _c, _d, _e;
        const carrotHeight = 5;
        let result = ((_a = box === null || box === void 0 ? void 0 : box.left) !== null && _a !== void 0 ? _a : 0) -
            ((_b = root === null || root === void 0 ? void 0 : root.width) !== null && _b !== void 0 ? _b : 0) * 0.5 +
            ((_c = box === null || box === void 0 ? void 0 : box.width) !== null && _c !== void 0 ? _c : 0) * 0.5 +
            offset;
        result =
            result > document.body.getBoundingClientRect().width - ((_d = root === null || root === void 0 ? void 0 : root.width) !== null && _d !== void 0 ? _d : 0)
                ? document.body.getBoundingClientRect().width -
                    ((_e = root === null || root === void 0 ? void 0 : root.width) !== null && _e !== void 0 ? _e : 0) -
                    carrotHeight
                : result;
        return result > 0 ? result : carrotHeight;
    };
    const getTopCarrot = (root, box, offset) => {
        var _a, _b, _c;
        return Math.max(((_a = box === null || box === void 0 ? void 0 : box.top) !== null && _a !== void 0 ? _a : 0) - ((_b = root === null || root === void 0 ? void 0 : root.height) !== null && _b !== void 0 ? _b : 0) + ((_c = root === null || root === void 0 ? void 0 : root.height) !== null && _c !== void 0 ? _c : 0) + offset, 0);
    };
    const getLeftCarrot = (root, box, offset) => {
        var _a, _b;
        return ((_a = box === null || box === void 0 ? void 0 : box.left) !== null && _a !== void 0 ? _a : 0) + ((_b = box === null || box === void 0 ? void 0 : box.width) !== null && _b !== void 0 ? _b : 0) * 0.5 + offset;
    };
    const name = getMessageName(message, activePlayers.entities, activeCharacters.entities, activeCampaign === null || activeCampaign === void 0 ? void 0 : activeCampaign.dmId);
    return ReactDOM.createPortal(React.createElement(React.Fragment, null,
        React.createElement("div", { className: cx(classes.MessageCarrot, classes.MessageRoot), style: {
                top: getTopCarrot(messageRootBox, box, -10),
                left: getLeftCarrot(messageRootBox, box, -10),
            } }),
        React.createElement("div", { className: cx(classes.MessageRoot), style: {
                top: getTop(messageRootBox, box, -10),
                left: getLeft(messageRootBox, box, -5),
            }, ref: messageRootRef, onClick: notificationOnClick },
            React.createElement("div", { className: classes.Message }, message.eventType === 'dice/roll/fulfilled' && (React.createElement("div", { className: classes.MessageWrapper },
                React.createElement("div", { className: classes.MessageIcon, style: { background: themeColor } },
                    React.createElement("span", { className: classes.MessageIconDie })),
                React.createElement("span", { className: classes.MessageContent },
                    name,
                    " Rolled", (_b = message.data.rolls) === null || _b === void 0 ? void 0 :
                    _b.map((roll, index) => {
                        var _a;
                        return (React.createElement(Fragment, { key: index },
                            "\u00A0",
                            React.createElement(GameLogNotificationMessage, { message: message, roll: roll }),
                            "\u00A0",
                            React.createElement("span", { className: cx(classes.MessageTotal) }, (_a = roll.result) === null || _a === void 0 ? void 0 : _a.total)));
                    }))))))), GameLogNotificationContainer);
};
//# sourceMappingURL=GameLogNotification.js.map