import React, { useState, useCallback, useMemo } from 'react';
import noop from 'lodash/noop';
import Heading from '../Heading';
import Tooltip from '../Tooltip';
import SparklineChart from '../SparklineChart';
import TrendIndicator from '../TrendIndicator';
import Text from '../Text';
import Loader from '../Loader';
import { st, classes } from './AnalyticsSummaryCard.st.css.js';
import { dataHooks, HORIZONTAL_PADDING, } from './AnalyticsSummaryCard.constants';
import { withFocusable } from '../common/Focusable';
const SPARKLINE_HEIGHT = 22;
// storybook utils can't unwrap HOC, hence the export
export const AnalyticsSummaryCard = ({ isLoading = false, ctaButton = null, footer = null, onChartHover = noop, isTrendVisible = false, alwaysShowCTA = false, chartWidth = 69, chartAnimationDuration = 300, onClick, onCTAClick, title, titleTooltip, value, valueTooltip, dataHook, className, trend, invertedTrend, chartData, chartColorHex, chartHighlightedStartingIndex, getChartTooltipContent, focusableOnFocus, focusableOnBlur, border = false, horizontalPadding = HORIZONTAL_PADDING.large, }) => {
    const [isHovered, setIsHovered] = useState(false);
    const handleMouseEnter = useCallback(() => setIsHovered(true), []);
    const handleMouseLeave = useCallback(() => setIsHovered(false), []);
    const handleClick = useCallback((event) => onClick?.(event), [onClick]);
    const handleCTAClick = useCallback((event) => {
        event.stopPropagation();
        onCTAClick?.(event);
    }, [onCTAClick]);
    const shouldShowCTA = useMemo(() => !isLoading && ctaButton && (isHovered || alwaysShowCTA), [alwaysShowCTA, ctaButton, isHovered, isLoading]);
    const renderTitle = useCallback(() => (React.createElement(Tooltip, { placement: "top", content: titleTooltip, disabled: !titleTooltip, dataHook: dataHooks.analyticsSummaryCardTitleTooltip },
        React.createElement("span", { "data-hook": dataHooks.analyticsSummaryCardTitle }, title))), [title, titleTooltip]);
    const renderValue = useCallback(() => {
        if (valueTooltip) {
            return (React.createElement(Tooltip, { placement: "top", content: valueTooltip, dataHook: dataHooks.analyticsSummaryCardValueTooltip },
                React.createElement(Text, { tagName: "span", weight: "bold", dataHook: dataHooks.analyticsSummaryCardValue }, value)));
        }
        else {
            return (React.createElement(Text, { tagName: "span", weight: "bold", dataHook: dataHooks.analyticsSummaryCardValue }, value));
        }
    }, [value, valueTooltip]);
    const isClickable = useMemo(() => onClick !== undefined, [onClick]);
    return (React.createElement("div", { className: st(classes.root, {
            hovered: isHovered,
            clickable: isClickable,
            border,
            horizontalPadding,
        }, className), "data-hook": dataHook, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: focusableOnFocus, onBlur: focusableOnBlur },
        isLoading && (React.createElement("div", { className: classes.loader },
            React.createElement(Loader, { dataHook: dataHooks.analyticsSummaryCardLoader, size: "tiny" }))),
        shouldShowCTA && (React.createElement("div", { "data-hook": dataHooks.analyticsSummaryCardCTA, className: st(classes.ctaButton), onClick: handleCTAClick, onFocus: focusableOnFocus, onBlur: focusableOnBlur }, ctaButton)),
        React.createElement("div", null,
            React.createElement("div", { className: st(classes.title), onFocus: focusableOnFocus, onBlur: focusableOnBlur },
                React.createElement(Heading, { size: "extraTiny" }, renderTitle())),
            React.createElement("div", { className: classes.valueLineContainer },
                React.createElement("div", { className: classes.valueAndTrend },
                    renderValue(),
                    isTrendVisible && trend !== undefined && (React.createElement(TrendIndicator, { dataHook: dataHooks.analyticsSummaryCardTrend, className: classes.trend, value: trend, inverted: invertedTrend }))),
                React.createElement("div", { className: st(classes.sparkline), onFocus: focusableOnFocus, onBlur: focusableOnBlur },
                    React.createElement(SparklineChart, { dataHook: dataHooks.analyticsSummaryCardChart, onHover: onChartHover, data: chartData, color: chartColorHex, width: chartWidth, height: SPARKLINE_HEIGHT, highlightedStartingIndex: chartHighlightedStartingIndex, getTooltipContent: getChartTooltipContent, animationDuration: chartAnimationDuration }))),
            React.createElement("div", { className: st(classes.footer) },
                " ",
                footer))));
};
AnalyticsSummaryCard.displayName = 'AnalyticsSummaryCard';
export default withFocusable(AnalyticsSummaryCard);
//# sourceMappingURL=AnalyticsSummaryCard.js.map