import { __assign, __read, __rest } from "tslib";
import React, { useState, useRef, useLayoutEffect } from "react";
import { TextareaStyled, TextareaWrapper, TextAreaResizerWrapper } from "./styles";
import getSizingData from "./helpers/getSizingData";
import calculateNodeHeight from "./helpers/calculateNodeHeight";
var TextArea = function (_a) {
    var id = _a.id, value = _a.value, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onKeyPress = _a.onKeyPress, isAutoFocus = _a.isAutoFocus, isDisabled = _a.isDisabled, isRequired = _a.isRequired, error = _a.error, _b = _a.size, size = _b === void 0 ? "l" : _b, status = _a.status, statusText = _a.statusText, placeholder = _a.placeholder, testId = _a.testId, tooltipContent = _a.tooltipContent, tooltipPosition = _a.tooltipPosition, alignText = _a.alignText, className = _a.className, name = _a.name, maxLength = _a.maxLength, isShowClearIcon = _a.isShowClearIcon, rows = _a.rows, cols = _a.cols, _c = _a.minRows, minRows = _c === void 0 ? 1 : _c, _d = _a.maxRows, maxRows = _d === void 0 ? Infinity : _d, _e = _a.isAutoSize, isAutoSize = _e === void 0 ? false : _e, iconLeft = _a.iconLeft, statusLabel = _a.statusLabel, isReadOnly = _a.isReadOnly, _f = _a.readOnlyEmptyText, readOnlyEmptyText = _f === void 0 ? "Не заполнено" : _f, props = __rest(_a, ["id", "value", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyPress", "isAutoFocus", "isDisabled", "isRequired", "error", "size", "status", "statusText", "placeholder", "testId", "tooltipContent", "tooltipPosition", "alignText", "className", "name", "maxLength", "isShowClearIcon", "rows", "cols", "minRows", "maxRows", "isAutoSize", "iconLeft", "statusLabel", "isReadOnly", "readOnlyEmptyText"]);
    var _g = __read(useState(false), 2), isFocused = _g[0], setFocused = _g[1];
    var textareaRef = useRef(null);
    var resizerRef = useRef(null);
    var heightRef = React.useRef(0);
    var measurementsCacheRef = React.useRef();
    var handleFocus = function (event) {
        onFocus && onFocus(event);
        setFocused(true);
    };
    var handleBlur = function (event) {
        var _value = event.target.value;
        onBlur && onBlur(event, _value);
        setFocused(false);
    };
    var handleClear = function (event) {
        event.preventDefault();
        event.stopPropagation();
        onChange === null || onChange === void 0 ? void 0 : onChange(event, "", id);
    };
    var handleChange = function (event) {
        onChange === null || onChange === void 0 ? void 0 : onChange(event, event.target.value, id);
    };
    var baseInputProps = __assign({ placeholder: placeholder, error: error, tooltipPosition: tooltipPosition, tooltipContent: tooltipContent, size: size, alignText: alignText, className: className, isDisabled: isDisabled, isShowClearIcon: isShowClearIcon, isAutoFocus: isAutoFocus, testId: testId, isFocused: isFocused, statusText: statusText, status: status, isHasValue: Boolean(value) || Boolean(isReadOnly), onClear: handleClear, isRequired: isRequired, isPasswordVisible: false, statusLabel: statusLabel, iconLeft: iconLeft, isReadOnly: isReadOnly }, props);
    var handleKeyDown = function (event) {
        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
    };
    var resizeTextarea = function () {
        var textAreaNode = textareaRef.current;
        var resizerNode = resizerRef.current;
        if (textAreaNode && resizerNode) {
            var textAreaSizingData = measurementsCacheRef.current
                ? measurementsCacheRef.current
                : getSizingData(textAreaNode);
            var resizerSizingData = getSizingData(resizerNode);
            if (!textAreaSizingData || !resizerSizingData) {
                return;
            }
            measurementsCacheRef.current = textAreaSizingData;
            var _a = __read(calculateNodeHeight(textAreaSizingData, textAreaNode.value || textAreaNode.placeholder || "x", minRows, maxRows), 1), heightTextArea = _a[0];
            var _b = __read(calculateNodeHeight(resizerSizingData, textAreaNode.value || textAreaNode.placeholder || "x", minRows, maxRows), 1), heightResizer = _b[0];
            if (heightResizer > heightTextArea || heightResizer < 30 || isAutoSize) {
                resizerNode.style.setProperty("overflow-y", "hidden");
            }
            else {
                resizerNode.style.setProperty("overflow-y", "visible");
            }
            if (heightRef.current !== heightTextArea) {
                heightRef.current = heightTextArea;
                textAreaNode.style.setProperty("height", heightTextArea + "px");
                if ((isAutoSize || minRows > 1 || Number.isFinite(maxRows)) &&
                    resizerRef.current) {
                    resizerNode.style.setProperty("height", heightTextArea + "px");
                }
            }
        }
    };
    useLayoutEffect(function () {
        resizeTextarea();
    });
    return (React.createElement(TextareaWrapper, __assign({}, baseInputProps, { isShowLabel: true, cols: cols, classNameIconBox: "textarea__icon-box", classNameContent: "textarea__content", classNameAddonsRight: "textarea__resizer-wrapper" }),
        React.createElement(TextAreaResizerWrapper, { size: size, ref: resizerRef, isDisabled: isDisabled, isReadOnly: isReadOnly },
            React.createElement(TextareaStyled, { id: id, name: name, value: !value && isReadOnly ? readOnlyEmptyText : value || "", maxLength: maxLength, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, onKeyPress: onKeyPress, onChange: handleChange, rows: rows, cols: cols, disabled: isDisabled, size: size, isShowClearIcon: isShowClearIcon && Boolean(value), ref: textareaRef, readOnly: isReadOnly }))));
};
export default TextArea;
