/*!
 * KoliBri - The accessible HTML-Standard
 */
import { h } from "@stencil/core";
import { translate } from "../../../i18n";
function getMeterState(value, min, max, low, high, optimum) {
    const effectiveLow = low !== null && low !== void 0 ? low : min;
    const effectiveHigh = high !== null && high !== void 0 ? high : max;
    if (optimum === undefined) {
        const inMidRegion = value >= effectiveLow && value <= effectiveHigh;
        return inMidRegion ? 'optimum' : 'suboptimal';
    }
    const inLowRegion = value < effectiveLow;
    const inHighRegion = value > effectiveHigh;
    const inMidRegion = !inLowRegion && !inHighRegion;
    const optimumInLow = optimum < effectiveLow;
    const optimumInHigh = optimum > effectiveHigh;
    if (optimumInLow) {
        if (inLowRegion)
            return 'optimum';
        if (inMidRegion)
            return 'suboptimal';
        return 'critical';
    }
    else if (optimumInHigh) {
        if (inHighRegion)
            return 'optimum';
        if (inMidRegion)
            return 'suboptimal';
        return 'critical';
    }
    else {
        if (inMidRegion)
            return 'optimum';
        return 'suboptimal';
    }
}
export const MeterFC = (props) => {
    const { high, label, low, max, min, optimum, orientation, unit, value } = props;
    const isVertical = orientation === 'vertical';
    const isPercentage = unit === '%';
    const displayValue = isPercentage ? Math.round(((value - min) / (max - min)) * 100) : value;
    const state = getMeterState(value, min, max, low, high, optimum);
    const hasStateClassification = low !== undefined || high !== undefined;
    const stateLabel = hasStateClassification ? translate(`kol-meter-state-${state}`) : '';
    const charCount = max.toString().length > min.toString().length ? max.toString().length + 'ch' : min.toString().length + 'ch';
    return (h("div", { class: { 'kol-meter': true, 'kol-meter--vertical': isVertical } }, h("div", { class: "kol-meter__bar" }, h("div", { class: "kol-meter__bar-label" }, label, hasStateClassification && (h("span", { class: `kol-meter__bar-state kol-meter__bar-state--${state}` }, ' – ', stateLabel))), h("div", { class: "kol-meter__bar-track" }, h("meter", { "aria-label": label, high: high, low: low, max: max, min: min, optimum: optimum, value: value })), h("span", { class: "kol-meter__value-unit" }, h("span", { class: "kol-meter__value", style: { 'min-width': charCount } }, displayValue), h("span", { class: "kol-meter__unit" }, unit)))));
};
//# sourceMappingURL=component.js.map
