import React, { Component, Fragment } from 'react';
import { keysOf } from '../common';
import classNames from 'classnames';
import { SoftText } from '../Text';
import { SoftTitle } from '../Title';
import { SoftI18n } from '../I18n';
import makeId from '../Form/form_row/make_id';
const colorToClassNameMap = {
    default: null,
    subdued: 'softStat__title--subdued',
    primary: 'softStat__title--primary',
    secondary: 'softStat__title--secondary',
    danger: 'softStat__title--danger',
    accent: 'softStat__title--accent',
};
export const COLORS = keysOf(colorToClassNameMap);
const textAlignToClassNameMap = {
    left: 'softStat--leftAligned',
    center: 'softStat--centerAligned',
    right: 'softStat--rightAligned',
};
export const ALIGNMENTS = keysOf(textAlignToClassNameMap);
export class SoftStat extends Component {
    render() {
        let { children, className, description, isLoading, reverse, textAlign, title, titleColor, titleSize, ...rest } = this.props;
        const classes = classNames('softStat', textAlignToClassNameMap[textAlign], className);
        const ariaId = makeId();
        const titleClasses = classNames('softStat__title', colorToClassNameMap[titleColor], {
            'softStat__title-isLoading': isLoading,
        });
        const descriptionDisplay = (React.createElement(SoftText, { size: "s", className: "softStat__description" },
            React.createElement("p", { id: ariaId }, description)));
        let titleText;
        if (isLoading) {
            titleText = (
            // SoftI18n has trouble with the string setting
            // @ts-ignore
            React.createElement(SoftI18n, { token: "softStat.loadingText", default: "Statistic is loading" }, (loadingText) => React.createElement("p", { "aria-label": loadingText }, "--")));
        }
        else {
            titleText = title;
        }
        const titleDisplay = (React.createElement(SoftTitle, { size: titleSize, className: titleClasses },
            React.createElement("p", { "aria-labelledby": ariaId }, titleText)));
        let statDisplay;
        if (reverse) {
            statDisplay = (React.createElement(Fragment, null,
                titleDisplay,
                descriptionDisplay));
        }
        else {
            statDisplay = (React.createElement(Fragment, null,
                descriptionDisplay,
                titleDisplay));
        }
        return (React.createElement("div", Object.assign({ className: classes }, rest),
            statDisplay,
            children));
    }
}
SoftStat.defaultProps = { isLoading: false, reverse: false, textAlign: 'left', titleColor: 'default', titleSize: 'l' };
//# sourceMappingURL=SoftStat.js.map