/*!
 * KoliBri - The accessible HTML-Standard
 */
import { Fragment, h } from "@stencil/core";
import { translate } from "../../i18n";
import clsx from "../../utils/clsx";
import { createRelatedUniqueId } from "../../utils/dev.utils";
const KolFormFieldCounterFc = ({ currentLength, currentLengthDebounced, maxLength, maxLengthBehavior, id }) => {
    let visualText;
    let ariaText;
    const counterClasses = ['kol-form-field__counter'];
    if (maxLengthBehavior === 'hard') {
        visualText =
            typeof maxLength === 'number'
                ? translate('kol-character-counter-current-of-max', { placeholders: { current: String(currentLength), max: String(maxLength) } })
                : translate('kol-character-counter-current', { placeholders: { current: String(currentLength) } });
        ariaText =
            typeof maxLength === 'number'
                ? translate('kol-character-counter-current-of-max-aria', { placeholders: { current: String(currentLengthDebounced), max: String(maxLength) } })
                : translate('kol-character-counter-current', { placeholders: { current: String(currentLengthDebounced) } });
    }
    else if (typeof maxLength === 'number') {
        const remainingLive = maxLength - currentLength;
        const exceededLive = remainingLive < 0;
        const remainingDebounced = maxLength - currentLengthDebounced;
        const exceededDebounced = remainingDebounced < 0;
        visualText = exceededLive
            ? translate('kol-character-limit-exceeded', { placeholders: { over: String(Math.abs(remainingLive)) } })
            : translate('kol-character-limit-remaining', { placeholders: { remaining: String(remainingLive) } });
        ariaText = exceededDebounced
            ? translate('kol-character-limit-exceeded', { placeholders: { over: String(Math.abs(remainingDebounced)) } })
            : translate('kol-character-limit-remaining', { placeholders: { remaining: String(remainingDebounced) } });
        if (exceededLive) {
            counterClasses.push('kol-form-field__counter--exceeded');
        }
    }
    else {
        return null;
    }
    return (h(Fragment, null, h("span", { class: clsx(counterClasses), "aria-hidden": "true", "data-testid": "input-counter" }, visualText), h("span", { id: createRelatedUniqueId(id || '', 'counter'), "aria-live": "polite", class: "visually-hidden", "data-testid": "input-counter-aria" }, ariaText)));
};
export default KolFormFieldCounterFc;
//# sourceMappingURL=FormFieldCounter.js.map
