import React, { useCallback, useContext, useState, } from 'react';
import { makeStyles } from '../../shared/makeStyles';
import { DiceThumbnail } from '../DiceThumbnail/DiceThumbnail';
import { Flex } from '../Flex';
import { GameLogContext } from '../GameLogContextProvider';
import { CloseIcon } from './images/CloseIcon';
import { ExternalLinkIcon } from './images/ExternalLinkIcon';
// Set this to change how many dice are needed before switching to displaying smaller icons with 3 columns
// So if set to 7, up to 6 dice will display in 2 larger columns
const diceCountForSmallIcons = 7;
// GA parameters the Analytics team requested we use
const diceCtaAnalyticsParameters = '?icid_medium=cta&icid_source=shared_gamespace&icid_campaign=dice';
const useStyles = makeStyles()(({ gameLog: { fontRobotoCondensed, messageColorOther } }, _params, classes) => ({
    DicePreviewContainer: {
        width: '100%',
    },
    SetPreviewContainer: {
        width: '100%',
        [`&.${classes.Expanded}`]: {
            marginLeft: 0,
        },
    },
    SetPreviewDescriptionContainer: {
        display: 'flex',
        flexDirection: 'column',
        width: '100%',
    },
    SetPreviewDescription: {
        fontFamily: fontRobotoCondensed,
        fontStyle: 'normal',
        fontWeight: 'bold',
        fontSize: '12px',
        lineHeight: '16px',
        letterSpacing: '0.4px',
        color: '#a7b6c2',
    },
    SetPreviewActionsContainer: {
        alignItems: 'flex-start',
        justifyContent: 'space-between',
    },
    SetPreviewCallToAction: {
        color: 'inherit',
    },
    SetPreviewCallToActionIcon: {
        marginLeft: '6px',
        verticalAlign: 'text-top',
    },
    SetPreviewCloseAction: {
        marginLeft: '32px',
        marginTop: '-3px',
        cursor: 'pointer',
    },
    DieThumbnailsList: {
        width: '100%',
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'center',
    },
    PreviewThumbnail: {
        width: '60px',
        minWidth: '60px',
        marginLeft: '-12px',
        cursor: 'pointer',
    },
    DieThumbnail: {
        width: '33.3333%',
        [`&.${classes.Large}`]: {
            width: '50%',
        },
    },
    Divider: {
        width: '100%',
        height: '1px',
        margin: '12px 0 8px 0',
        backgroundColor: messageColorOther,
    },
    Expanded: {},
    Large: {},
}));
export const DiceThumbnails = ({ roll, setId }) => {
    var _a, _b, _c;
    const [isExpanded, setIsExpanded] = useState(false);
    const toggleIsExpanded = useCallback(() => setIsExpanded((prevIsExpanded) => !prevIsExpanded), []);
    const [{ diceFamilies, baseUrl }] = useContext(GameLogContext);
    const { classes, cx } = useStyles(null);
    const familyId = setId.substring(0, 3);
    const diceFamilyInfo = diceFamilies.entities[familyId];
    const diceSetInfo = (_a = diceFamilies.entities[familyId]) === null || _a === void 0 ? void 0 : _a.sets.definitionData.find((x) => x.id === setId);
    const diceRollSets = roll.diceNotation.set;
    const firstSetResult = (_c = (_b = diceRollSets[0]) === null || _b === void 0 ? void 0 : _b.dice) === null || _c === void 0 ? void 0 : _c[0];
    const shouldDisplayLargeDice = diceRollSets.reduce((acc, set) => acc + Number(set === null || set === void 0 ? void 0 : set.dice.length), 0) <
        diceCountForSmallIcons;
    const descriptionString = `Rolled with ${diceSetInfo === null || diceSetInfo === void 0 ? void 0 : diceSetInfo.fullName}`;
    return (React.createElement(Flex, { className: classes.DicePreviewContainer, flexDirection: "column" },
        React.createElement(Flex, { className: cx(classes.SetPreviewContainer, isExpanded && classes.Expanded) },
            !isExpanded && (React.createElement(DiceThumbnail, { className: classes.PreviewThumbnail, setDiceResult: firstSetResult, setId: setId, onClick: toggleIsExpanded })),
            React.createElement("div", { className: classes.SetPreviewDescriptionContainer },
                React.createElement("div", { className: classes.Divider }),
                diceFamilyInfo && (React.createElement(Flex, { className: classes.SetPreviewActionsContainer },
                    React.createElement("span", { className: classes.SetPreviewDescription }, isExpanded && diceFamilyInfo.marketplaceUrl ? (React.createElement("a", { className: classes.SetPreviewCallToAction, href: `${baseUrl}${diceFamilyInfo.marketplaceUrl}${diceCtaAnalyticsParameters}`, target: "_blank", rel: "noreferrer" },
                        descriptionString,
                        React.createElement(ExternalLinkIcon, { className: classes.SetPreviewCallToActionIcon }))) : (descriptionString)),
                    isExpanded && (React.createElement("span", { className: classes.SetPreviewCloseAction },
                        React.createElement(CloseIcon, { onClick: () => toggleIsExpanded() }))))))),
        React.createElement("div", { className: classes.DieThumbnailsList }, isExpanded &&
            diceRollSets.map((set, setIndex) => {
                const setDiceGroups = set === null || set === void 0 ? void 0 : set.dice;
                return setDiceGroups.map((setDice, setDiceIndex) => (React.createElement(DiceThumbnail, { className: cx(classes.DieThumbnail, shouldDisplayLargeDice && classes.Large), setDiceResult: setDice, setId: setId, key: `${setIndex}-${setDiceIndex}` })));
            }))));
};
//# sourceMappingURL=DiceThumbnails.js.map