import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
var _excluded = ["leftIcon", "rightIcon", "borderless"];
var _class, _InternalTextareaWithLayout;
import React from 'react';
import { InputLayout } from "../../../components/Input/InputLayout/InputLayout";
import { DEFAULT_WIDTH, Textarea } from "../../../components/Textarea";
import { styles as textareaStyles } from "../../../components/Textarea/Textarea.styles";
import { cx } from "../../../lib/theming/Emotion";
import { ThemeContext } from "../../../lib/theming/ThemeContext";
import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
import { getRootNode, rootNode } from "../../../lib/rootNode";
import { styles as inputStyles } from "../../../components/Input/Input.styles";
import { createPropsGetter } from "../../../lib/createPropsGetter";
import { isTestEnv } from "../../../lib/currentEnvironment";
import { calculateClearCrossShowedState, InputDataTids } from "../../../components/Input";
import { ClearCrossIcon } from "../../ClearCrossIcon/ClearCrossIcon";
import { styles } from "../InternalTextareaWithLayout.styles";
export var InternalTextareaWithLayout = rootNode(_class = (_InternalTextareaWithLayout = /*#__PURE__*/function (_React$Component) {
  function InternalTextareaWithLayout() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.wrappedComponentRef = /*#__PURE__*/React.createRef();
    _this.getProps = createPropsGetter(Textarea.defaultProps);
    _this.getClearCrossShowed = function (_ref) {
      var focused = _ref.focused,
        hovered = _ref.hovered;
      if (_this.props.disabled) {
        return false;
      }
      return calculateClearCrossShowedState({
        showClearIcon: _this.getProps().showClearIcon || 'never',
        notEmptyValue: Boolean(_this.props.value),
        focused: focused,
        hovered: hovered
      });
    };
    _this.state = {
      focused: false,
      hovered: false,
      clearCrossShowed: _this.getClearCrossShowed({
        focused: false
      })
    };
    _this.handleClearInput = function () {
      if (_this.wrappedComponentRef.current) {
        _this.wrappedComponentRef.current.clear();
        if (!_this.state.focused) {
          _this.wrappedComponentRef.current.focus();
        }
      }
      if (_this.props.onValueChange) {
        _this.props.onValueChange('');
      }
    };
    _this.getRightIcon = function () {
      var _this$props = _this.props,
        size = _this$props.size,
        rightIcon = _this$props.rightIcon;
      return _this.state.clearCrossShowed ? /*#__PURE__*/
      React.createElement(ClearCrossIcon, {
        "data-tid": InputDataTids.clearCross,
        size: size,
        onClick: _this.handleClearInput
      }) : rightIcon;
    };
    _this.handleMouseEnter = function () {
      _this.setState({
        clearCrossShowed: _this.getClearCrossShowed({
          focused: _this.state.focused,
          hovered: true
        })
      });
    };
    _this.handleMouseOut = function () {
      _this.setState({
        clearCrossShowed: _this.getClearCrossShowed({
          focused: _this.state.focused,
          hovered: false
        })
      });
    };
    _this.renderLayout = function () {
      var _cx;
      var labelProps = {
        className: cx(styles.contentWrapper(), textareaStyles.textarea(_this.theme), _this.getTextareaSizeClassName(), _this.getRootSizeClassName(), (_cx = {}, _cx[inputStyles.focus(_this.theme)] = _this.state.focused && !_this.props.warning && !_this.props.error, _cx[inputStyles.borderless()] = _this.props.borderless && !_this.state.focused, _cx[textareaStyles.disabled(_this.theme)] = _this.props.disabled, _cx[textareaStyles.warning(_this.theme)] = _this.props.warning, _cx[textareaStyles.error(_this.theme)] = _this.props.error, _cx)),
        style: {
          width: _this.props.width || DEFAULT_WIDTH,
          minWidth: '0',
          position: 'relative'
        },
        onMouseEnter: _this.handleMouseEnter,
        onMouseLeave: _this.handleMouseOut,
        onClick: _this.handleLayoutClick
      };
      return /*#__PURE__*/(
        React.createElement(InputLayout, {
          leftIcon: _this.props.leftIcon,
          rightIcon: _this.getRightIcon(),
          labelProps: labelProps,
          context: {
            disabled: _this.props.disabled,
            focused: _this.state.focused,
            size: _this.getProps().size
          },
          tag: "span"
        }, _this.renderTextarea())
      );
    };
    _this.renderTextarea = function () {
      var _this$props2 = _this.props,
        leftIcon = _this$props2.leftIcon,
        rightIcon = _this$props2.rightIcon,
        borderless = _this$props2.borderless,
        textareaProps = _objectWithoutPropertiesLoose(_this$props2, _excluded);
      return /*#__PURE__*/(
        React.createElement(ThemeContext.Provider, {
          value: _this.preparedTheme
        }, /*#__PURE__*/
        React.createElement(Textarea, _extends({}, isTestEnv ? {
          spellCheck: false
        } : {}, textareaProps, {
          width: '100%',
          ref: _this.wrappedComponentRef,
          onFocus: _this.handleFocus,
          onBlur: _this.handleBlur
        })))
      );
    };
    _this.handleLayoutClick = function () {
      var _this$wrappedComponen;
      (_this$wrappedComponen = _this.wrappedComponentRef.current) == null || _this$wrappedComponen.focus();
    };
    _this.handleBlur = function (event) {
      var _getRootNode;
      if ((_getRootNode = getRootNode(_this)) != null && _getRootNode.contains(event.relatedTarget)) {
        _this.setState({
          focused: false
        });
      } else {
        _this.setState({
          focused: false,
          clearCrossShowed: _this.getClearCrossShowed({
            focused: false,
            hovered: _this.state.hovered
          })
        });
        _this.props.onBlur == null || _this.props.onBlur(event);
      }
    };
    _this.handleFocus = function (event) {
      _this.setState({
        focused: true,
        clearCrossShowed: _this.getClearCrossShowed({
          focused: true,
          hovered: _this.state.hovered
        })
      });
      _this.props.onFocus == null || _this.props.onFocus(event);
    };
    return _this;
  }
  _inheritsLoose(InternalTextareaWithLayout, _React$Component);
  var _proto = InternalTextareaWithLayout.prototype;
  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _this$state = this.state,
      focused = _this$state.focused,
      hovered = _this$state.hovered;
    if (Boolean(prevProps.value) !== Boolean(this.props.value)) {
      this.setState({
        clearCrossShowed: this.getClearCrossShowed({
          focused: focused,
          hovered: hovered
        })
      });
    }
  };
  _proto.focus = function focus() {
    var _this$wrappedComponen2;
    (_this$wrappedComponen2 = this.wrappedComponentRef.current) == null || _this$wrappedComponen2.focus();
  };
  _proto.blur = function blur() {
    var _this$wrappedComponen3;
    (_this$wrappedComponen3 = this.wrappedComponentRef.current) == null || _this$wrappedComponen3.blur();
  };
  _proto.setSelectionRange = function setSelectionRange(start, end) {
    var _this$wrappedComponen4;
    (_this$wrappedComponen4 = this.wrappedComponentRef.current) == null || _this$wrappedComponen4.setSelectionRange(start, end);
  };
  _proto.selectAll = function selectAll() {
    var _this$wrappedComponen5;
    (_this$wrappedComponen5 = this.wrappedComponentRef.current) == null || _this$wrappedComponen5.selectAll();
  };
  _proto.getNode = function getNode() {
    var _this$wrappedComponen6;
    return (_this$wrappedComponen6 = this.wrappedComponentRef.current) == null ? void 0 : _this$wrappedComponen6.getNode();
  };
  _proto.render = function render() {
    var _this2 = this;
    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
      _this2.theme = theme;
      return /*#__PURE__*/React.createElement("span", {
        "data-tid": 'InternalTextareaWithLayout'
      }, _this2.renderLayout());
    });
  };
  _proto.getTextareaSizeClassName = function getTextareaSizeClassName() {
    switch (this.getProps().size) {
      case 'large':
        return textareaStyles.textareaLarge(this.theme);
      case 'medium':
        return textareaStyles.textareaMedium(this.theme);
      case 'small':
      default:
        return textareaStyles.textareaSmall(this.theme);
    }
  };
  _proto.getRootSizeClassName = function getRootSizeClassName() {
    switch (this.getProps().size) {
      case 'large':
        return textareaStyles.rootLarge(this.theme);
      case 'medium':
        return textareaStyles.rootMedium(this.theme);
      case 'small':
      default:
        return textareaStyles.rootSmall(this.theme);
    }
  };
  return _createClass(InternalTextareaWithLayout, [{
    key: "preparedTheme",
    get: function get() {
      return ThemeFactory.create({
        textareaWidth: 'auto',
        textareaBorderWidth: '0px',
        textareaPaddingXSmall: '0px',
        textareaPaddingXMedium: '0px',
        textareaPaddingXLarge: '0px',
        textareaPaddingYSmall: '0px',
        textareaPaddingYMedium: '0px',
        textareaPaddingYLarge: '0px',
        textareaOutlineWidth: '0px',
        textareaShadow: 'none',
        textareaDisabledBg: 'transparent',
        textareaBg: 'transparent'
      }, this.theme);
    }
  }]);
}(React.Component), _InternalTextareaWithLayout.__KONTUR_REACT_UI__ = 'InternalTextareaWithLayout', _InternalTextareaWithLayout)) || _class;