var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React, { useContext, useCallback, useImperativeHandle, useState } from 'react';
import { useEmotion, useStyles } from '../../lib/renderEnvironment/index.js';
import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
import { isFunction } from '../../lib/utils.js';
import { Tooltip } from '../Tooltip/index.js';
import { QuestionCircleIcon16Solid } from '../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid.js';
import { TextareaDataTids } from './Textarea.js';
import { getStyles } from './Textarea.styles.js';
var handleHelpMouseDown = function (e) { return e.preventDefault(); };
export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_a, ref) {
    var _b;
    var length = _a.length, value = _a.value, help = _a.help, onCloseHelp = _a.onCloseHelp, textarea = _a.textarea, size = _a.size;
    var theme = useContext(ThemeContext);
    var cx = useEmotion().cx;
    var styles = useStyles(getStyles);
    var _c = useState(textarea.clientWidth), width = _c[0], setWidth = _c[1];
    var _d = useState(textarea.clientHeight), height = _d[0], setHeight = _d[1];
    var reflow = useCallback(function () {
        var clientWidth = textarea.clientWidth, clientHeight = textarea.clientHeight;
        setWidth(clientWidth);
        setHeight(clientHeight);
    }, [textarea]);
    useImperativeHandle(ref, function () { return ({ reflow: reflow }); }, [reflow]);
    var renderTooltipContent = useCallback(function () {
        if (typeof help === 'function') {
            return help();
        }
        return help;
    }, [help]);
    var textareaValue = value ? value.toString().length : 0;
    var counterValue = length - textareaValue;
    var helpIconProps = {
        onMouseDown: handleHelpMouseDown,
        color: theme.textareaCounterHelpIconColor,
        'data-tid': TextareaDataTids.helpIcon,
    };
    var helpIcon = React.createElement(QuestionCircleIcon16Solid, __assign({}, helpIconProps));
    var counterHelp = isFunction(help) ? (help()) : (React.createElement(Tooltip, { pos: 'right bottom', trigger: 'click', render: renderTooltipContent, onCloseClick: onCloseHelp }, helpIcon));
    var getCounterSizeClassName = function () {
        switch (size) {
            case 'large':
                return styles.counterLarge(theme);
            case 'medium':
                return styles.counterMedium(theme);
            case 'small':
            default:
                return styles.counterSmall(theme);
        }
    };
    return (React.createElement("div", { "data-tid": TextareaDataTids.counter, className: cx(styles.counterContainer(theme)), style: { width: width, height: height } },
        React.createElement("span", { className: cx(getCounterSizeClassName(), styles.counter(theme), (_b = {},
                _b[styles.counterError(theme)] = counterValue < 0,
                _b)) },
            counterValue,
            help && React.createElement("span", { className: styles.counterHelp() }, counterHelp))));
});
//# sourceMappingURL=TextareaCounter.js.map