import React, { useContext, useCallback, useImperativeHandle, useState } from 'react';
import { forwardRefAndName } from "../../../lib/forwardRefAndName";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { isFunction } from "../../../lib/utils";
import { Tooltip } from "../../Tooltip";
import { cx } from "../../../lib/theming/Emotion";
import { QuestionCircleIcon16Solid } from "../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid";
import { TextareaDataTids } from "../Textarea";
import { styles } from "../Textarea.styles";
var handleHelpMouseDown = function handleHelpMouseDown(e) {
  return e.preventDefault();
};
export var TextareaCounter = 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 = useContext(ThemeContext);
  var _useState = useState(textarea.clientWidth),
    width = _useState[0],
    setWidth = _useState[1];
  var _useState2 = useState(textarea.clientHeight),
    height = _useState2[0],
    setHeight = _useState2[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 = /*#__PURE__*/React.createElement(QuestionCircleIcon16Solid, helpIconProps);
  var counterHelp = isFunction(help) ? help() : /*#__PURE__*/

  React.createElement(Tooltip, {
    pos: 'right bottom',
    trigger: 'click',
    render: renderTooltipContent,
    onCloseClick: onCloseHelp
  }, helpIcon);
  var getCounterSizeClassName = function getCounterSizeClassName() {
    switch (size) {
      case 'large':
        return styles.counterLarge(theme);
      case 'medium':
        return styles.counterMedium(theme);
      case 'small':
      default:
        return styles.counterSmall(theme);
    }
  };
  return /*#__PURE__*/(
    React.createElement("div", {
      "data-tid": TextareaDataTids.counter,
      className: cx(styles.counterContainer(theme)),
      style: {
        width: width,
        height: height
      }
    }, /*#__PURE__*/
    React.createElement("span", {
      className: cx(getCounterSizeClassName(), styles.counter(theme), (_cx = {}, _cx[styles.counterError(theme)] = counterValue < 0, _cx))
    }, counterValue, help && /*#__PURE__*/React.createElement("span", {
      className: styles.counterHelp()
    }, counterHelp)))
  );
});