"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.TextareaCounter = void 0;
var _react = _interopRequireWildcard(require("react"));

var _forwardRefAndName = require("../../lib/forwardRefAndName");
var _ThemeContext = require("../../lib/theming/ThemeContext");
var _utils = require("../../lib/utils");
var _Tooltip = require("../Tooltip");
var _Emotion = require("../../lib/theming/Emotion");
var _QuestionCircleIcon16Solid = require("../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid");



var _Textarea = require("./Textarea");
var _Textarea2 = require("./Textarea.styles");














var handleHelpMouseDown = function handleHelpMouseDown(e) {return e.preventDefault();};

var TextareaCounter = exports.TextareaCounter = (0, _forwardRefAndName.forwardRefAndName)(
  'TextareaCounter',
  function (_ref, ref) {var _cx;var length = _ref.length,value = _ref.value,help = _ref.help,onCloseHelp = _ref.onCloseHelp,textarea = _ref.textarea,size = _ref.size;
    var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
    var _useState = (0, _react.useState)(textarea.clientWidth),width = _useState[0],setWidth = _useState[1];
    var _useState2 = (0, _react.useState)(textarea.clientHeight),height = _useState2[0],setHeight = _useState2[1];
    var reflow = (0, _react.useCallback)(function () {
      var clientWidth = textarea.clientWidth,clientHeight = textarea.clientHeight;
      setWidth(clientWidth);
      setHeight(clientHeight);
    }, [textarea]);
    (0, _react.useImperativeHandle)(ref, function () {return { reflow: reflow };}, [reflow]);
    var renderTooltipContent = (0, _react.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': _Textarea.TextareaDataTids.helpIcon
    };
    var helpIcon = /*#__PURE__*/_react.default.createElement(_QuestionCircleIcon16Solid.QuestionCircleIcon16Solid, helpIconProps);
    var counterHelp = (0, _utils.isFunction)(help) ?
    help() : /*#__PURE__*/

    _react.default.createElement(_Tooltip.Tooltip, { pos: 'right bottom', trigger: 'click', render: renderTooltipContent, onCloseClick: onCloseHelp },
    helpIcon
    );


    var getCounterSizeClassName = function getCounterSizeClassName() {
      switch (size) {
        case 'large':
          return _Textarea2.styles.counterLarge(theme);
        case 'medium':
          return _Textarea2.styles.counterMedium(theme);
        case 'small':
        default:
          return _Textarea2.styles.counterSmall(theme);
      }
    };

    return /*#__PURE__*/(
      _react.default.createElement("div", { "data-tid": _Textarea.TextareaDataTids.counter, className: (0, _Emotion.cx)(_Textarea2.styles.counterContainer(theme)), style: { width: width, height: height } }, /*#__PURE__*/
      _react.default.createElement("span", {
        className: (0, _Emotion.cx)(getCounterSizeClassName(), _Textarea2.styles.counter(theme), (_cx = {}, _cx[
        _Textarea2.styles.counterError(theme)] = counterValue < 0, _cx)
        ) },

      counterValue,
      help && /*#__PURE__*/_react.default.createElement("span", { className: _Textarea2.styles.counterHelp() }, counterHelp)
      )
      ));

  }
);