var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
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);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { InputLayout } from '../../components/Input/InputLayout/InputLayout.js';
import { DEFAULT_WIDTH, Textarea } from '../../components/Textarea/index.js';
import { getStyles as getTextareaStyles } from '../../components/Textarea/Textarea.styles.js';
import { ThemeContext } from '../../lib/theming/ThemeContext.js';
import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
import { getStyles as getInputStyles } from '../../components/Input/Input.styles.js';
import { createPropsGetter } from '../../lib/createPropsGetter.js';
import { isTestEnv } from '../../lib/currentEnvironment.js';
import { calculateClearCrossShowedState, InputDataTids } from '../../components/Input/index.js';
import { ClearCrossIcon } from '../ClearCrossIcon/ClearCrossIcon.js';
import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
import { getStyles } from './InternalTextareaWithLayout.styles.js';
var InternalTextareaWithLayout = /** @class */ (function (_super) {
    __extends(InternalTextareaWithLayout, _super);
    function InternalTextareaWithLayout() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.wrappedComponentRef = React.createRef();
        _this.getProps = createPropsGetter(Textarea.defaultProps);
        _this.getClearCrossShowed = function (_a) {
            var focused = _a.focused, hovered = _a.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 _a = _this.props, size = _a.size, rightIcon = _a.rightIcon;
            return _this.state.clearCrossShowed ? (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 _a;
            var labelProps = {
                className: _this.cx(_this.styles.contentWrapper(), _this.textareaStyles.textarea(_this.theme), _this.getTextareaSizeClassName(), _this.getRootSizeClassName(), (_a = {},
                    _a[_this.inputStyles.focus(_this.theme)] = _this.state.focused && !_this.props.warning && !_this.props.error,
                    _a[_this.inputStyles.borderless()] = _this.props.borderless && !_this.state.focused,
                    _a[_this.textareaStyles.disabled(_this.theme)] = _this.props.disabled,
                    _a[_this.textareaStyles.warning(_this.theme)] = _this.props.warning,
                    _a[_this.textareaStyles.error(_this.theme)] = _this.props.error,
                    _a)),
                style: { width: _this.props.width || DEFAULT_WIDTH, minWidth: '0', position: 'relative' },
                onMouseEnter: _this.handleMouseEnter,
                onMouseLeave: _this.handleMouseOut,
                onClick: _this.handleLayoutClick,
            };
            return (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 _a = _this.props, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, borderless = _a.borderless, textareaProps = __rest(_a, ["leftIcon", "rightIcon", "borderless"]);
            return (React.createElement(ThemeContext.Provider, { value: _this.preparedTheme },
                React.createElement(Textarea, __assign({}, (isTestEnv ? { spellCheck: false } : {}), textareaProps, { width: '100%', ref: _this.wrappedComponentRef, onFocus: _this.handleFocus, onBlur: _this.handleBlur }))));
        };
        _this.handleLayoutClick = function () {
            var _a;
            (_a = _this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
        };
        _this.handleBlur = function (event) {
            var _a, _b, _c;
            if ((_a = getRootNode(_this)) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
                _this.setState({ focused: false });
            }
            else {
                _this.setState({
                    focused: false,
                    clearCrossShowed: _this.getClearCrossShowed({ focused: false, hovered: _this.state.hovered }),
                });
                (_c = (_b = _this.props).onBlur) === null || _c === void 0 ? void 0 : _c.call(_b, event);
            }
        };
        _this.handleFocus = function (event) {
            var _a, _b;
            _this.setState({
                focused: true,
                clearCrossShowed: _this.getClearCrossShowed({ focused: true, hovered: _this.state.hovered }),
            });
            (_b = (_a = _this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event);
        };
        return _this;
    }
    InternalTextareaWithLayout.prototype.componentDidUpdate = function (prevProps) {
        var _a = this.state, focused = _a.focused, hovered = _a.hovered;
        if (Boolean(prevProps.value) !== Boolean(this.props.value)) {
            this.setState({ clearCrossShowed: this.getClearCrossShowed({ focused: focused, hovered: hovered }) });
        }
    };
    InternalTextareaWithLayout.prototype.focus = function () {
        var _a;
        (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
    };
    InternalTextareaWithLayout.prototype.blur = function () {
        var _a;
        (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.blur();
    };
    InternalTextareaWithLayout.prototype.setSelectionRange = function (start, end) {
        var _a;
        (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end);
    };
    InternalTextareaWithLayout.prototype.selectAll = function () {
        var _a;
        (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.selectAll();
    };
    InternalTextareaWithLayout.prototype.getNode = function () {
        var _a;
        return (_a = this.wrappedComponentRef.current) === null || _a === void 0 ? void 0 : _a.getNode();
    };
    InternalTextareaWithLayout.prototype.render = function () {
        var _this = this;
        this.styles = getStyles(this.emotion);
        this.inputStyles = getInputStyles(this.emotion);
        this.textareaStyles = getTextareaStyles(this.emotion);
        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
            _this.theme = theme;
            return React.createElement("span", { "data-tid": 'InternalTextareaWithLayout' }, _this.renderLayout());
        }));
    };
    InternalTextareaWithLayout.prototype.getTextareaSizeClassName = function () {
        switch (this.getProps().size) {
            case 'large':
                return this.textareaStyles.textareaLarge(this.theme);
            case 'medium':
                return this.textareaStyles.textareaMedium(this.theme);
            case 'small':
            default:
                return this.textareaStyles.textareaSmall(this.theme);
        }
    };
    InternalTextareaWithLayout.prototype.getRootSizeClassName = function () {
        switch (this.getProps().size) {
            case 'large':
                return this.textareaStyles.rootLarge(this.theme);
            case 'medium':
                return this.textareaStyles.rootMedium(this.theme);
            case 'small':
            default:
                return this.textareaStyles.rootSmall(this.theme);
        }
    };
    Object.defineProperty(InternalTextareaWithLayout.prototype, "preparedTheme", {
        get: function () {
            return ThemeFactory.create({
                textareaBorderWidth: '0px',
                textareaPaddingXSmall: '0px',
                textareaPaddingXMedium: '0px',
                textareaPaddingXLarge: '0px',
                textareaPaddingYSmall: '0px',
                textareaPaddingYMedium: '0px',
                textareaPaddingYLarge: '0px',
                textareaOutlineWidth: '0px',
                textareaShadow: 'none',
                textareaDisabledBg: 'transparent',
                textareaBg: 'transparent',
            }, this.theme);
        },
        enumerable: false,
        configurable: true
    });
    InternalTextareaWithLayout.__KONTUR_REACT_UI__ = 'InternalTextareaWithLayout';
    InternalTextareaWithLayout = __decorate([
        withRenderEnvironment,
        rootNode
    ], InternalTextareaWithLayout);
    return InternalTextareaWithLayout;
}(React.Component));
export { InternalTextareaWithLayout };
//# sourceMappingURL=InternalTextareaWithLayout.js.map