import React from 'react';
import { st, classes } from './FunnelStep.st.css.js';
import { FunnelBadge } from '../FunnelBadge';
import { countPercentageFromBase, formatToPercent, } from '../../utils/numberFormatters';
import { dataHooks } from '../constants';
const BADGE_STANDARD_FIXED_PERCENT_POSITION = 0.6;
const BADGE_DARK_FIXED_PERCENT_POSITION = 0.45;
const BADGE_STANDARD_MAX_TOP_POSITION = 86;
const BADGE_DARK_MAX_TOP_POSITION = 90;
const BADGE_OVERFLOWED_TOP_POSITION = 10;
function calculateBadgeTopPosition(currentDeltaHeight, nextDeltaHeight, differenceBadgeSkin) {
    const isDarkBadge = differenceBadgeSkin === 'dark';
    const badgeFixedPercentPosition = isDarkBadge
        ? BADGE_DARK_FIXED_PERCENT_POSITION
        : BADGE_STANDARD_FIXED_PERCENT_POSITION;
    const badgeMaxTopPosition = isDarkBadge
        ? BADGE_DARK_MAX_TOP_POSITION
        : BADGE_STANDARD_MAX_TOP_POSITION;
    const calculatedBadgePosition = Math.max(currentDeltaHeight + nextDeltaHeight * badgeFixedPercentPosition, 100 - badgeMaxTopPosition);
    return calculatedBadgePosition < 0
        ? BADGE_OVERFLOWED_TOP_POSITION
        : calculatedBadgePosition;
}
export const FunnelStep = ({ currentBarIndex, currentBarData, nextBarData, currentBarHeight, nextBarHeight, hideDifferenceBadge, differenceBadgeSkin, // remove
getDifferenceBadgeProps, getDifferenceStepSkin, getTooltipContent, getTooltipProps, onTooltipShow, }) => {
    const nextDeltaHeight = currentBarHeight - nextBarHeight;
    const currentDeltaHeight = 100 - currentBarHeight;
    const badgeTopPosition = calculateBadgeTopPosition(currentDeltaHeight, nextDeltaHeight, differenceBadgeSkin);
    const difference = countPercentageFromBase(+currentBarData.value, +nextBarData.value, 0);
    const differenceInPercentage = formatToPercent(difference);
    const dataForDifferenceBadge = {
        currentIndex: currentBarIndex,
        differenceValue: difference / 100,
        difference: differenceInPercentage,
    };
    const { skin, ...otherDifferenceBadgeProps } = getDifferenceBadgeProps(dataForDifferenceBadge);
    const chosenBadgeSkin = skin ?? differenceBadgeSkin;
    const isDarkBadge = chosenBadgeSkin === 'dark';
    const styleAttributes = {
        nextBarIsFlat: nextBarHeight === 0,
        skin: getDifferenceStepSkin(dataForDifferenceBadge),
    };
    return (React.createElement("div", { className: st(classes.root, styleAttributes), "data-hook": dataHooks.step, "data-skin": styleAttributes.skin },
        React.createElement("div", { className: classes.funnelStepRotated, style: {
                height: `${nextDeltaHeight}%`,
            } }),
        React.createElement("div", { className: classes.funnelStep, style: { height: `${nextBarHeight}%` } }),
        React.createElement("div", { className: classes.funnelStepPlaceholder, style: {
                top: `${currentDeltaHeight}%`,
                height: `${nextDeltaHeight}%`,
            } }),
        hideDifferenceBadge ? null : (React.createElement("div", { className: st(classes.badgeWrapper, { top: isDarkBadge }), style: { top: `${badgeTopPosition}%` } },
            React.createElement(FunnelBadge, { value: differenceInPercentage, tooltipContent: getTooltipContent(dataForDifferenceBadge), tooltipProps: getTooltipProps(dataForDifferenceBadge), differenceBadgeSkin: chosenBadgeSkin, onTooltipShow: () => onTooltipShow(dataForDifferenceBadge), ...otherDifferenceBadgeProps })))));
};
/** It just takes place but doesn't display or calculate anything */
export const EmptyFunnelStep = () => React.createElement("div", { className: st(classes.root) });
//# sourceMappingURL=FunnelStep.js.map