import React, { useContext } from 'react';
import { SortByArrowUp, SortByArrowDown, } from '@wix/wix-ui-icons-common/system';
import { st, classes } from './TrendIndicator.st.css.js';
import { dataHooks } from './TrendIndicator.constants';
import { WixStyleReactEnvironmentContext } from '../WixStyleReactEnvironmentProvider/context';
const TrendIndicatorInner = ({ value, inverted = false, className, dataHook, locale, format = 'percent', }) => {
    const context = useContext(WixStyleReactEnvironmentContext);
    const effectiveLocale = locale || context.locale;
    if (isNaN(Number(value))) {
        return null;
    }
    let skin = 'neutral';
    let trendIcon = null;
    if (value > 0) {
        trendIcon = React.createElement(SortByArrowUp, { "data-hook": dataHooks.trendIndicatorUp });
        skin = !inverted ? 'positive' : 'negative';
    }
    else if (value < 0) {
        trendIcon = React.createElement(SortByArrowDown, { "data-hook": dataHooks.trendIndicatorDown });
        skin = !inverted ? 'negative' : 'positive';
    }
    return (React.createElement("div", { className: st(classes.root, { skin }, className), "data-hook": dataHook },
        React.createElement("div", { className: classes.caption },
            !!value && (React.createElement("span", { className: classes.icon, "data-hook": dataHooks.trendIndicatorIcon }, trendIcon)),
            React.createElement("span", { "data-hook": dataHooks.trendIndicatorValue }, new Intl.NumberFormat(effectiveLocale, { style: format }).format(Math.abs(value) / (format === 'percent' ? 100 : 1))))));
};
const TrendIndicator = (props) => (React.createElement(WixStyleReactEnvironmentContext.Provider, { value: { locale: 'en' } },
    React.createElement(TrendIndicatorInner, { ...props })));
TrendIndicator.displayName = 'TrendIndicator';
export default TrendIndicator;
//# sourceMappingURL=TrendIndicator.js.map