import createGenerateClassName from '@mui/styles/createGenerateClassName';
import StylesProvider from '@mui/styles/StylesProvider';
import React, { useContext, useEffect } from 'react';
import { useInfiniteScroll } from '../../hooks/useInfiniteScroll';
import { makeStyles } from '../../shared/makeStyles';
import { Flex } from '../Flex';
import { GameLogContext } from '../GameLogContextProvider';
import { GameLogEntry } from '../GameLogEntry';
import { GameLogHeader } from '../GameLogHeader';
import { Sentinel } from '../Sentinel';
import { EmptyStateIcon } from './images/EmptyStateIcon';
import { DiceRollActionTypes } from '@dndbeyond/pocket-dimension-dice/constants';
const generateClassName = createGenerateClassName({
    productionPrefix: 'gl',
});
const useStyles = makeStyles()(({ gameLog: { fontRoboto } }) => ({
    GameLogContainer: {
        width: '100%',
        height: '100%',
        minWidth: '288px',
        maxWidth: '512px', // or 64 8pt units
    },
    GameLog: {
        width: '100%',
        height: '100%',
        display: 'flex',
        flexFlow: 'column-reverse nowrap',
        overscrollBehavior: 'container',
        overflow: 'auto',
    },
    GameLogEntries: {
        display: 'flex',
        alignItems: 'center',
        flexFlow: 'column-reverse nowrap',
        transform: 'translateZ(0)',
        padding: '0 10px',
        listStyleType: 'none',
        '& > li:last-child': {
            width: '100%',
            position: 'relative',
            top: '30vh',
        },
    },
    ZeroStateContainer: {
        alignSelf: 'center',
        maxWidth: '75%',
        height: '100%',
    },
    ZeroStateTitle: {
        marginTop: '40px',
        fontFamily: fontRoboto,
        fontWeight: 900,
        fontSize: '1.125rem',
    },
    ZeroStateDescription: {
        marginTop: '10px',
        fontFamily: fontRoboto,
        fontWeight: 400,
        fontSize: '0.875rem',
        lineHeight: 1.57,
        textAlign: 'center',
    },
}));
export const GameLog = ({ isVisible }) => {
    const [{ entityId, fetchHistory, messages }] = useContext(GameLogContext);
    const [gameLogRef, startRef] = useInfiniteScroll(fetchHistory);
    const { classes, cx } = useStyles();
    const latestMessage = messages.entities[messages.ids[0]];
    const isPending = latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.eventType.includes('pending');
    const isSelf = (latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.entityId) === entityId;
    useEffect(() => {
        if (!gameLogRef.current) {
            return;
        }
        let immediateId;
        if (isPending && isSelf) {
            immediateId = setImmediate(() => {
                var _a;
                (_a = gameLogRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
                    behavior: 'smooth',
                    top: 0,
                });
            });
        }
        return () => {
            clearImmediate(immediateId);
        };
    }, [gameLogRef, isPending, isSelf, messages.ids.length]);
    if (!isVisible)
        return null;
    /**
     * we need a static class name so that importing apps (like character tools)
     * can target the game-log without targeting CSS module mangled (or hashed)
     * class names
     *
     * n.b. `glc` is a kind of namespace for `game-log-client` (`character-tools`
     * uses a similar `ct` prefix), `game-log` is itself, I believe the "block" in
     * BEM, so it doesn't get an element (like `root` or something), based on the
     * below-linked cheatsheet
     *
     * @see https://9elements.com/bem-cheat-sheet/
     */
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore old type error
    React.createElement(StylesProvider, { generateClassName: generateClassName },
        React.createElement(Flex, { flexDirection: "column", className: cx('glc-game-log', classes.GameLogContainer) },
            React.createElement(GameLogHeader, { headerName: "Game Log" }),
            React.createElement("div", { className: classes.GameLog, ref: gameLogRef }, messages.ids.length > 0 ? (React.createElement("ol", { className: classes.GameLogEntries },
                messages.ids
                    .filter((id) => {
                    var _a;
                    return ((_a = messages.entities[id]) === null || _a === void 0 ? void 0 : _a.eventType) !==
                        DiceRollActionTypes.Deferred;
                })
                    .map((messageId) => (React.createElement(GameLogEntry, { key: messageId, messageId: messageId }))),
                React.createElement("li", null,
                    React.createElement(Sentinel, { ref: startRef })))) : (React.createElement(Flex, { flexDirection: "column", className: classes.ZeroStateContainer },
                React.createElement(EmptyStateIcon, null),
                React.createElement("div", { className: classes.ZeroStateTitle }, "No Game Activity Yet"),
                React.createElement("div", { className: classes.ZeroStateDescription }, "There are no rolls for your campaign. When you roll, it will show up here for everyone in your campaign.")))))));
};
//# sourceMappingURL=GameLog.js.map