import React, { useEffect, useState } from "react";
import { BodyShort } from "../../typography/index.js";
import { debounce } from "../../utils-external/index.js";
import { cl } from "../../utils/helpers/index.js";
import { useI18n } from "../../utils/i18n/i18n.hooks.js";
const TextareaCounter = ({ maxLengthId, maxLength, currentLength, size, i18n, }) => {
    const translate = useI18n("Textarea", {
        charsLeft: (i18n === null || i18n === void 0 ? void 0 : i18n.counterLeft) ? `{chars} ${i18n.counterLeft}` : undefined,
        charsTooMany: (i18n === null || i18n === void 0 ? void 0 : i18n.counterTooMuch)
            ? `{chars} ${i18n.counterTooMuch}`
            : undefined,
    });
    const difference = maxLength - currentLength;
    const [debouncedDiff, setDebouncedDiff] = useState(difference);
    useEffect(() => {
        const debounceFunc = debounce(() => {
            setDebouncedDiff(difference);
        }, 2000);
        debounceFunc();
        return () => {
            debounceFunc.clear();
        };
    }, [difference]);
    return (React.createElement(React.Fragment, null,
        React.createElement("span", { id: maxLengthId, className: "aksel-sr-only" }, translate("maxLength", { maxLength })),
        difference < 20 && (React.createElement("span", { role: "status", className: "aksel-textarea__sr-counter aksel-sr-only" }, getCounterText(debouncedDiff, translate))),
        React.createElement(BodyShort, { className: cl("aksel-textarea__counter", {
                "aksel-textarea__counter--error": difference < 0,
            }), size: size }, getCounterText(difference, translate))));
};
const getCounterText = (difference, translate) => difference < 0
    ? translate("charsTooMany", { chars: Math.abs(difference) })
    : translate("charsLeft", { chars: difference });
export default TextareaCounter;
//# sourceMappingURL=TextareaCounter.js.map