import React, { Fragment } from 'react';
import { Avatar, colors, makeStyles } from '@material-ui/core';
import clsx from 'clsx';
const useStyles = makeStyles((theme) => {
    var _a, _b;
    return ({
        root: {
            minWidth: 30,
            minHeight: 30,
            maxWidth: 70,
            maxHeight: 70,
            // color: theme.palette.getContrastText(theme.palette.primary.dark),
            color: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.dark
        },
        positive: {
            backgroundColor: (props) => colors.teal[Math.ceil((props.number * 5) / 100) * 100]
        },
        negative: {
            backgroundColor: (props) => colors.deepOrange[Math.abs(Math.ceil((props.number * 5) / 100) * 100)]
        }
    });
});
const NumberVisualization = (props) => {
    const classes = useStyles(props);
    const { number } = props;
    let displayCircle = '';
    if (number > 0) {
        displayCircle = (React.createElement(Avatar, { className: clsx(classes.root, classes.positive), style: {
                width: number * 2,
                height: number * 2
            } }, number));
    }
    else {
        displayCircle = (React.createElement(Avatar, { className: clsx(classes.root, classes.negative), style: {
                width: number * 2,
                height: number * 2
            } }, number));
    }
    return React.createElement(Fragment, null, " ", displayCircle, " ");
};
export default NumberVisualization;
//# sourceMappingURL=NumberVisualization.js.map