"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressBar = void 0;
const classnames_1 = __importDefault(require("classnames"));
const d3_scale_1 = require("d3-scale");
const react_1 = __importDefault(require("react"));
const text_measurements_1 = require("./text_measurements");
const icon_1 = require("../../../../components/icons/icon");
const common_1 = require("../../../../utils/common");
const specs_1 = require("../../specs");
const PROGRESS_BAR_BORDER_RADIUS = 8;
const ProgressBar = ({ datum, barBackground, panelBackground, blendedBarColor, size, }) => {
    const { title, value, target, valueFormatter, targetFormatter, progressBarDirection } = datum;
    const isBullet = (0, specs_1.isBulletMetric)(datum);
    const isVertical = progressBarDirection === common_1.LayoutDirection.Vertical;
    const domain = (0, specs_1.isBulletMetric)(datum) ? datum.domain : [0, datum.domainMax];
    const scale = (0, d3_scale_1.scaleLinear)().domain(domain).range([0, 100]);
    if ((0, specs_1.isBulletMetric)(datum) && datum.niceDomain) {
        scale.nice();
    }
    const updatedDomain = scale.domain();
    const [domainMin, domainMax] = (0, common_1.sortNumbers)(updatedDomain);
    const scaledValue = scale(value);
    const [min, max] = (0, common_1.sortNumbers)([scale(0), scaledValue]);
    const endValue = 100 - max;
    const safeStartValue = Math.max(0, min);
    const safeEndValue = Math.max(0, endValue);
    const positionStyle = isVertical
        ? {
            bottom: `${safeStartValue}%`,
            top: `${safeEndValue}%`,
        }
        : {
            left: `${safeStartValue}%`,
            right: `${safeEndValue}%`,
        };
    const borderRadius = { borderRadius: PROGRESS_BAR_BORDER_RADIUS };
    const hasProgressSpan = max - min > 0;
    const externalStroke = hasProgressSpan ? { boxShadow: `0 0 0 2px ${panelBackground}` } : {};
    const targetPlacement = (0, common_1.isNil)(target) ? null : `calc(${scale(target)}% - ${text_measurements_1.PROGRESS_BAR_TARGET_SIZE / 2}px)`;
    const hasZeroMarker = domainMin < 0 && domainMax > 0;
    let zeroBaselineNudgePx = 0;
    if (hasZeroMarker && hasProgressSpan) {
        const PROGRESS_BAR_ADJUSTMENT_PX = 1;
        const zero = scale(0);
        const isStartAtZero = scaledValue >= zero;
        const isEndAtZero = scaledValue <= zero;
        if (isVertical) {
            if (isStartAtZero) {
                borderRadius.borderBottomLeftRadius = 0;
                borderRadius.borderBottomRightRadius = 0;
                zeroBaselineNudgePx = PROGRESS_BAR_ADJUSTMENT_PX;
            }
            if (isEndAtZero) {
                borderRadius.borderTopLeftRadius = 0;
                borderRadius.borderTopRightRadius = 0;
                zeroBaselineNudgePx = -PROGRESS_BAR_ADJUSTMENT_PX;
            }
        }
        else {
            if (isStartAtZero) {
                borderRadius.borderTopLeftRadius = 0;
                borderRadius.borderBottomLeftRadius = 0;
                zeroBaselineNudgePx = PROGRESS_BAR_ADJUSTMENT_PX;
            }
            if (isEndAtZero) {
                borderRadius.borderTopRightRadius = 0;
                borderRadius.borderBottomRightRadius = 0;
                zeroBaselineNudgePx = -PROGRESS_BAR_ADJUSTMENT_PX;
            }
        }
    }
    const zeroPlacement = hasZeroMarker
        ? `calc(${scale(0)}% - ${text_measurements_1.PROGRESS_BAR_TARGET_SIZE / 2 + zeroBaselineNudgePx}px)`
        : null;
    const labelType = isBullet ? 'Value' : 'Percentage';
    return (react_1.default.createElement("div", { className: getDirectionalClasses('Progress', isVertical, size), style: { backgroundColor: barBackground }, title: !isBullet ? '' : `${updatedDomain[0]} to ${updatedDomain[1]}` },
        targetPlacement && (react_1.default.createElement("div", { className: getDirectionalClasses('Target', isVertical, size), style: {
                [isVertical ? 'bottom' : 'left']: targetPlacement,
            }, "aria-valuenow": target, title: `${isBullet ? `${datum.valueLabels.target}: ` : ''}${(targetFormatter ?? valueFormatter)(target || 0)}` },
            react_1.default.createElement(icon_1.Icon, { height: text_measurements_1.PROGRESS_BAR_TARGET_SIZE, width: text_measurements_1.PROGRESS_BAR_TARGET_SIZE, type: "downArrow", color: blendedBarColor }))),
        hasZeroMarker && (react_1.default.createElement("div", { className: getDirectionalClasses('ZeroBaseline', isVertical, size), style: {
                [isVertical ? 'bottom' : 'left']: zeroPlacement,
            } },
            react_1.default.createElement("div", { className: "echSingleMetricZeroBaseline__mark", style: { backgroundColor: blendedBarColor } }))),
        react_1.default.createElement("div", { className: getDirectionalClasses('ProgressBar', isVertical, size), style: { ...positionStyle, ...borderRadius, ...externalStroke, backgroundColor: blendedBarColor }, role: "meter", title: isBullet ? `${datum.valueLabels.value}: ${valueFormatter(value)}` : `${scaledValue}%`, "aria-label": title ? `${labelType} of ${title}` : labelType, "aria-valuemin": isBullet ? domainMin : 0, "aria-valuemax": isBullet ? domainMax : 100, "aria-valuenow": isBullet ? value : scaledValue })));
};
exports.ProgressBar = ProgressBar;
function getDirectionalClasses(element, isVertical, progressBarSize) {
    const base = `echSingleMetric${element}`;
    return (0, classnames_1.default)(base, `${base}--${progressBarSize}`, {
        [`${base}--vertical`]: isVertical,
        [`${base}--horizontal`]: !isVertical,
    });
}
//# sourceMappingURL=progress.js.map