import { default as React } from 'react';
import { BadgeProps } from '../Badge/Badge';
import { IconStringList } from '../Icons/Icon.models';
import { TooltipProps } from '../Tooltip/Tooltip';
import { chartColors } from './HeaderMetricGroup';
import { CompareWith, DateType, TimeframeType } from './HeaderMetricHelpers';
type HeaderMetricBase = {
    /** The key override for the metric - if it needs to be different than `title` */
    key?: string;
    /** Text to display in metric */
    title: string;
    /** Tooltip content to display next to title in metric */
    tooltip?: TooltipProps['tooltipContent'];
    /** The font size that will change the main data of the metric. */
    fontSize?: 'fs-16' | 'fs-18' | 'fs-22';
    /** Boolean to determine loading state */
    loading: boolean;
    /** Optional className can be added */
    className?: string;
    /** Optionally move the change metrics below the main metric. */
    showChangeBelowMainMetric?: boolean;
    /** Option to not multiple pctChange value by 100 (default: false) */
    noPctConversion?: boolean;
    /** Optional boolean to display beta tag in metric */
    beta?: boolean;
    /** Optional props to pass to the Badge component. If provided, this will be used instead of the default beta badge */
    badgeProps?: BadgeProps;
    /** Optional prop to add a test id to the HeaderMetric for QA testing */
    qaTestId?: string;
};
type HeaderMetricWithLink = HeaderMetricBase & {
    /** Link to display in metric, internal only */
    linkTo?: string;
    /** Router component (e.g. Using Link from react-router-dom) */
    routerComponent?: React.ElementType;
    /** Allow any props to be passed in */
    routerProp?: string;
    actionButton?: never;
};
type HeaderMetricWithActionButton = HeaderMetricBase & {
    /** Link to display in metric, internal only */
    linkTo?: never;
    /** Action button to display in metric */
    actionButton?: React.JSX.Element;
    routerComponent?: never;
    routerProp?: never;
};
type HeaderMetricBaseProps = HeaderMetricWithActionButton | HeaderMetricWithLink;
type HeaderMetricValueType = HeaderMetricBaseProps & {
    /** Value to display in metric */
    value?: number;
    /** Change value to display in metric */
    change?: number;
    /** Percentage change to display in metric */
    pctChange?: number;
    /** Currency to display in metric */
    currency?: CurrencyProps;
    /** Value format to display in metric */
    formatType?: 'number' | 'percentage';
    /** Metric icon to display in metric */
    metricIcon?: IconStringList;
    /** Decimal scale applied to value in metric */
    decimalScale?: number;
    /** Decimal scale applied to change value in metric */
    changeValueDecimalScale?: number;
    /** When we have a percentage value we should use this if we want to round that percentage value */
    roundNumber?: boolean;
    /** Reverse the change value display */
    reverse?: boolean;
    /** Allow the radio button to be displayed */
    showRadio?: boolean;
    /** When showRadio is true, use this prop to handle the function that needs to be called when the radio is clicked */
    callout?: ({ ...param }: CalloutProps) => void;
    /** This will set the metric number and checkbox color from list of chartColors */
    checkboxColor?: chartColors;
    /** When true, this will set the change value, and change icon to our purple color */
    isNeutralColor?: boolean;
    /** Checked state override of the metric radio button by default */
    isChecked?: boolean;
    /** Optional className can be added to the metric value */
    metricValueClassName?: string;
    /** Display values in a truncated format. i.e. 1.4M instead of 1,400,000 */
    truncateValues?: boolean;
    /** Displays the full percentage change value if set to true. Otherwise, it will display `<1%` if set to false */
    showLessThanZeroPercentageChange?: boolean;
    /** There are some instances where a custom element needs to replace the percentage values. This is where that should live. */
    customSecondaryValue?: React.ReactNode;
    secondaryInfo?: never;
    /** Information needed to display comparison tooltip */
    comparisonTooltip?: {
        /** Optional title to display for the primary metric value on comparison tooltip */
        primaryMetricTitle?: string;
        /** The value to display from the comparison period */
        comparison: number;
        /** The value to display for the whole comparison period */
        wholePreviousPeriodComparison?: number;
        /** The selected date range from the current period */
        currentPeriodDates: DateType;
        /** The timeframe object needed for the display text and comparison dates */
        timeframe: TimeframeType;
        /** Optional param that will be used for showing compareWith global timeframe filters */
        compareWith?: CompareWith;
        /** Optional param to remove current month for comparison if the current month has no data and the timeframe is quarterly/yearly */
        hasNoCurrentMonthData?: boolean;
        /** Optional props to show partial period dates */
        showPartialPeriodDates?: boolean;
        /** Optional param to show footer content in the tooltip */
        footerContent?: React.ReactNode;
    };
    /** Change value format to display in metric */
    changeValueFormatType?: 'number' | 'percentage';
};
type HeaderMetricTextType = HeaderMetricBaseProps & {
    /** Any value apart from change metrics. Eg: string, text */
    secondaryInfo: string;
    value?: never;
    change?: never;
    pctChange?: never;
    currency?: never;
    formatType?: never;
    metricIcon?: never;
    decimalScale?: never;
    changeValueDecimalScale?: never;
    roundNumber?: never;
    reverse?: never;
    showRadio?: never;
    callout?: never;
    checkboxColor?: never;
    isNeutralColor?: never;
    isChecked?: never;
    metricValueClassName?: never;
    truncateValues?: never;
    showLessThanZeroPercentageChange?: never;
    customSecondaryValue?: never;
    comparisonTooltip?: never;
    changeValueFormatType?: 'number' | 'percentage';
};
export type HeaderMetricProps = HeaderMetricValueType | HeaderMetricTextType;
export type CalloutProps = {
    /** When showRadio is true, use this prop to the function that needs to be called when the radio is clicked */
    name: string;
    checked: boolean;
};
export type CurrencyProps = {
    /** Currency code to display after metric (ex: 100฿) */
    currencyCode: string;
    /** Currency symbol to display before metric (ex: $100) */
    currencySymbol: string;
};
declare const HeaderMetric: ({ actionButton, beta, badgeProps, callout, change, checkboxColor, className, currency, customSecondaryValue, decimalScale, changeValueDecimalScale, fontSize, formatType, isChecked, isNeutralColor, linkTo, loading, metricIcon, metricValueClassName, noPctConversion, pctChange, reverse, roundNumber, secondaryInfo, showLessThanZeroPercentageChange, showRadio, title, tooltip, truncateValues, value, showChangeBelowMainMetric, comparisonTooltip, routerComponent, routerProp, changeValueFormatType, qaTestId, }: HeaderMetricProps) => React.JSX.Element;
export default HeaderMetric;