import React from 'react';
import { Typography, makeStyles } from '@material-ui/core';
import FluentTrendArrow from './FluentTrendArrow';
const useStyles = makeStyles(theme => ({
    root: {},
    percent: {
        display: 'flex',
        flexDirection: 'row',
        marginTop: theme.spacing(-0.5),
    },
    arrow: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
    },
    percentAmount: {},
}));
const FluentStatsSnippet = props => {
    const classes = useStyles(props);
    const { label, amount: rawAmount, prevAmount, percent: percentProp, trend: trendProp, } = props;
    // @todo Use an Intl formatter
    let amount = rawAmount;
    // TODO: Revisit below after Tampa Demo
    if (Math.abs(rawAmount) > 1_000_000) {
        //amount = Math.floor(rawAmount / 1_000_000) + 'M';
        let newNumber = rawAmount / 1_000_000;
        amount = [Math.round(newNumber * 10) / 10, 'M'];
    }
    else if (Math.abs(rawAmount) > 1_000) {
        //amount = Math.floor(rawAmount / 1_000) + 'K';
        let newNumber = rawAmount / 1_000;
        amount = [Math.round(newNumber * 10) / 10, 'K'];
    }
    let percent = percentProp;
    let trend = trendProp;
    if (typeof prevAmount === 'number') {
        const ratio = (rawAmount - prevAmount) / prevAmount;
        const roundTo = (value, step) => {
            if (typeof value !== 'number' || typeof step !== 'number' || step === 0)
                return value;
            return Math.round(value / step) * step;
        };
        percent =
            Math.abs(roundTo(ratio * 100, Math.abs(ratio) < 0.01 ? 0.01 : 1)) + '%';
        trend = ratio < 0 ? 'down' : 'up';
    }
    return (React.createElement("div", { className: classes.root }, React.createElement(Typography, { variant: "overline", component: "div" }, label), React.createElement(Typography, { className: classes.stat, variant: "h5", component: "div" }, amount), React.createElement("div", { className: classes.percent }, React.createElement("div", { className: classes.arrow }, React.createElement(FluentTrendArrow, { type: trend })), React.createElement("div", { className: classes.percentAmount }, React.createElement(Typography, { variant: "caption" }, percent)))));
};
export default FluentStatsSnippet;
//# sourceMappingURL=FluentStatsSnippet.js.map