import React, { useContext } from 'react';
import { makeStyles } from '../../shared/makeStyles';
import { Avatar, ddbAvatarUrl, fallbackAvatarUrl } from '../Avatar';
import { DiceMessageWrapper } from '../DiceMessageWrapper';
import { Flex } from '../Flex';
import { GameLogContext } from '../GameLogContextProvider';
import { TimeAgo } from '../TimeAgo';
import { getMessageName } from '../../helpers/getMessageName';
const useStyles = makeStyles()(({ gameLog: { fontRoboto, gameLogEntryAvatarMargin, gameLogEntryAvatarSize, glGray, gray5, messageBackgroundOther, messageBackgroundPending, messageBackgroundSelf, messageBorderOther, messageBorderPending, messageBorderSelf, messageColorOther, messageColorPending, messageColorSelf, }, }, _params, classes) => ({
    GameLogEntry: {
        width: '100%',
        marginBottom: '10px',
        // This specifically addresses a height calculation issue in Safari
        flex: '0 0 auto',
        // /**
        //  * n.b. these properties are pretty new and probably only help in Chromium-
        //  * based browsers until Firefox & Safari decide to implement
        //  *
        //  * @see https://youtu.be/FFA-v-CIxJQ
        //  * @see https://web.dev/content-visibility/
        //  */
        // contentVisibility: 'auto',
        // containIntrinsicSize: '206.5px',
        // contain: 'layout style paint',
        [`&.${classes.Self}`]: {
            width: `calc(100% - (${gameLogEntryAvatarSize} + ${gameLogEntryAvatarMargin}))`,
            alignSelf: 'flex-end',
        },
    },
    MessageContainer: {
        width: '100%',
        minWidth: 0,
    },
    Message: {
        width: '100%',
        overflow: 'hidden',
        padding: '8px 16px',
        [`&.${classes.Self}`]: {
            color: messageColorSelf,
            background: messageBackgroundSelf,
            border: `1px solid ${messageBorderSelf}`,
            borderRadius: '0.75rem 0.75rem 0 0.75rem',
        },
        [`&.${classes.Other}`]: {
            color: messageColorOther,
            background: messageBackgroundOther,
            border: `1px solid ${messageBorderOther}`,
            borderRadius: '0.75rem 0.75rem 0.75rem 0',
        },
        [`&.${classes.Collapsed}`]: {
            padding: '8px 10px',
        },
        [`&.${classes.Pending}`]: {
            color: messageColorPending,
            background: messageBackgroundPending,
            border: `1px solid ${messageBorderPending}`,
        },
    },
    // TODO: Duplicated in DiceMessage
    Line: {
        overflow: 'hidden',
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        width: '100%',
        fontFamily: fontRoboto,
        fontWeight: 'bold',
        color: glGray,
    },
    Sender: {
        fontSize: '0.8rem',
    },
    TimeAgo: {
        alignSelf: 'flex-end',
        marginTop: '4px',
        fontFamily: fontRoboto,
        fontWeight: 'bold',
        fontSize: '0.7rem',
        color: gray5,
        textTransform: 'uppercase',
    },
    Self: {},
    Other: {},
    Collapsed: {},
    Pending: {},
}));
export const GameLogEntry = ({ messageId }) => {
    var _a, _b;
    const [{ activeCampaign, activeCharacters, activePlayers, entityId, messages, expandedMessages, },] = useContext(GameLogContext);
    const { classes, cx } = useStyles(null);
    const message = messages.entities[messageId];
    if (!message) {
        if (process.env.NODE_ENV === 'development') {
            throw new Error([
                `message id ${messageId} has no associated entity, expected a`,
                `'Message' but got ${message}`,
            ].join(' '));
        }
        return null;
    }
    const isMapActivateMessage = message.eventType === 'map/activate/fulfilled';
    const isCollapsed = !expandedMessages.some((item) => item.messageId === messageId);
    const character = activeCharacters.entities[message.entityId];
    const avatarUrl = isMapActivateMessage
        ? ddbAvatarUrl
        : (_b = (_a = message.data.context) === null || _a === void 0 ? void 0 : _a.avatarUrl) !== null && _b !== void 0 ? _b : ((character === null || character === void 0 ? void 0 : character.avatarUrl) || fallbackAvatarUrl);
    const name = getMessageName(message, activePlayers.entities, activeCharacters.entities, activeCampaign === null || activeCampaign === void 0 ? void 0 : activeCampaign.dmId);
    const isPending = message.eventType.includes('pending');
    const isSelf = message.entityId === entityId;
    return (React.createElement(Flex, { tagName: "li", alignItems: "flex-end", justifyContent: "flex-start", key: message.id, className: cx(classes.GameLogEntry, isSelf ? classes.Self : classes.Other) },
        !isSelf && React.createElement(Avatar, { avatarUrl: avatarUrl, name: name }),
        React.createElement(Flex, { flexDirection: "column", alignItems: "flex-start", className: classes.MessageContainer },
            React.createElement(Flex, { className: classes.Line, justifyContent: "space-between" },
                React.createElement("span", { className: classes.Sender }, name)),
            React.createElement(Flex, { className: cx(classes.Message, isCollapsed && classes.Collapsed, isPending && classes.Pending, isSelf ? classes.Self : classes.Other) }, isMapActivateMessage ? (React.createElement("span", null, "Your game is LIVE!")) : (React.createElement(DiceMessageWrapper, { message: message, isCollapsed: isCollapsed, isSelf: isSelf }))),
            React.createElement(TimeAgo, { className: classes.TimeAgo, dateTime: parseInt(message.dateTime, 10) }))));
};
//# sourceMappingURL=GameLogEntry.js.map