import React, { useContext, useState } from 'react';
import { makeStyles } from '../../shared/makeStyles';
import { DieIcon } from '../DieIcon';
import { GameLogContext } from '../GameLogContextProvider';
export const getD100TensPlaceValue = (dieValue) => Math.floor(dieValue / 10) * 10;
export const getD100OnesPlaceValue = (dieValue) => {
    const result = dieValue - getD100TensPlaceValue(dieValue);
    return result === 0 ? 10 : result;
};
const useStyles = makeStyles()(({ gameLog: { fontRoboto, dieThumbnailImageSize, dieDoubleThumbnailImageSize, }, }, _params, classes) => ({
    DieThumbnailContainer: {
        position: 'relative',
        overflow: 'hidden',
        '&:before': {
            content: '""',
            display: 'block',
            paddingTop: '100%',
        },
    },
    DieThumbnailWrapper: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        [`&.${classes.Placeholder}`]: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
        },
    },
    DieThumbnailDoubleWrapper: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        display: 'flex',
        flexDirection: 'column',
        [`&.${classes.Placeholder}`]: {
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
        },
    },
    DieThumbnailImage: {
        width: dieThumbnailImageSize,
        height: dieThumbnailImageSize,
        marginLeft: '-35%',
        marginTop: '-40%',
    },
    DieThumbnailImageD100: {
        width: dieDoubleThumbnailImageSize,
        height: dieDoubleThumbnailImageSize,
        marginTop: '-48%',
        marginLeft: '-42%',
    },
    DieThumbnailImageD10: {
        width: dieDoubleThumbnailImageSize,
        height: dieDoubleThumbnailImageSize,
        marginTop: '-110%',
        marginLeft: '-10%',
    },
    PlaceholderValue: {
        fontSize: '0.75rem',
        fontFamily: fontRoboto,
        fontWeight: 500,
        lineHeight: 1,
    },
    Placeholder: {},
}));
export const DiceThumbnail = ({ className, onClick, setDiceResult, setId, }) => {
    const [imageDidFail, setImageDidFail] = useState(false);
    const [{ diceThumbnailsUrl }] = useContext(GameLogContext);
    const { classes, cx } = useStyles(null);
    return (
    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
    React.createElement("span", { className: cx(className, classes.DieThumbnailContainer), onClick: onClick }, imageDidFail ? (React.createElement("span", { className: cx(classes.DieThumbnailWrapper, classes.Placeholder) },
        React.createElement(DieIcon, { forDie: setDiceResult.dieType }),
        React.createElement("span", { className: classes.PlaceholderValue }, setDiceResult.dieValue))) : setDiceResult.dieType === 'd100' ? (React.createElement("span", { title: setDiceResult.dieValue.toString(), className: classes.DieThumbnailDoubleWrapper },
        React.createElement("img", { className: classes.DieThumbnailImageD100, src: `${diceThumbnailsUrl}/${setId}-d100-${getD100TensPlaceValue(setDiceResult.dieValue)}.png`, alt: `d100 roll of ${setDiceResult.dieValue}`, onError: () => setImageDidFail(true) }),
        React.createElement("img", { className: classes.DieThumbnailImageD10, src: `${diceThumbnailsUrl}/${setId}-d10-${getD100OnesPlaceValue(setDiceResult.dieValue)}.png`, alt: `${setDiceResult.dieType} roll of ${setDiceResult.dieValue}`, onError: () => setImageDidFail(true) }))) : (React.createElement("span", { title: setDiceResult.dieValue.toString(), className: classes.DieThumbnailWrapper },
        React.createElement("img", { className: classes.DieThumbnailImage, src: `${diceThumbnailsUrl}/${setId}-${setDiceResult.dieType}-${setDiceResult.dieValue}.png`, alt: `${setDiceResult.dieType} roll of ${setDiceResult.dieValue}`, onError: () => setImageDidFail(true) })))));
};
//# sourceMappingURL=DiceThumbnail.js.map