import React, { Fragment } from 'react';
import { makeStyles } from '../../shared/makeStyles';
import { DiceMessage } from '../DiceMessage';
import { DiceThumbnails } from '../DiceThumbnails';
import { Flex } from '../Flex';
const useStyles = makeStyles()(() => ({
    Container: {
        width: '100%',
    },
}));
export const DiceMessageWrapper = ({ message, isCollapsed, isSelf, }) => {
    var _a;
    const { classes } = useStyles();
    const isPending = message.eventType.includes('pending');
    return (React.createElement(Flex, { className: classes.Container, flexDirection: "column" }, (_a = message.data.rolls) === null || _a === void 0 ? void 0 : _a.map((roll, key) => (React.createElement(Fragment, { key: key },
        React.createElement(DiceMessage, { message: message, isSelf: isSelf, roll: roll, isPending: isPending, isCollapsed: isCollapsed }),
        !isPending && !isCollapsed && roll.diceNotation.set.length > 0 && (React.createElement(DiceThumbnails, { roll: roll, setId: message.data.setId || '00101' })))))));
};
//# sourceMappingURL=DiceMessageWrapper.js.map