import React from 'react';
import { FORM } from "../../../constants";
const { FORM_DISABLED_STATE } = FORM;
import { FormContext } from '../Form';
import DebouncedField from '../DebouncedField';
import { TextareaWrapperDiv, Label } from './styled';
export class TextArea extends React.Component {
    constructor() {
        super(...arguments);
        this.$hiddenArea = React.createRef();
        this.state = {
            isFocus: false,
            _handleHeight: 0,
        };
        this.getHandleHeight = () => {
            const { autoResize } = this.props;
            const hiddenArea = this.$hiddenArea.current;
            if (!autoResize || !hiddenArea) {
                return 0;
            }
            hiddenArea.style.height = '50px';
            const withScroll = hiddenArea.clientHeight < hiddenArea.scrollHeight;
            const scrollHeight = hiddenArea.scrollHeight;
            hiddenArea.style.height = '';
            return withScroll ? scrollHeight : 40;
        };
        this.onChange = (currentValue) => {
            const { props: { name, withContext }, context: { onChange: onChangeForm }, } = this;
            const { onChange } = this.props;
            if (onChange) {
                onChange(currentValue);
            }
            if (withContext && onChangeForm) {
                onChangeForm(name, currentValue);
            }
        };
        this.onBlur = (event) => {
            const { currentTarget } = event;
            const { props: { name, onBlur }, context: { onBlurForm }, } = this;
            if (onBlurForm) {
                onBlurForm(name, currentTarget.value);
            }
            if (onBlur) {
                onBlur(currentTarget);
            }
        };
        this.onFocus = (event) => {
            const { currentTarget } = event;
            const { props: { onFocus }, context: { onFocusForm }, } = this;
            if (onFocusForm) {
                onFocusForm(event);
            }
            if (onFocus) {
                onFocus(currentTarget);
            }
        };
    }
    componentDidMount() {
        const { props } = this, { withContext } = props;
        if (withContext) {
            const { context: { addField }, } = this;
            if (addField) {
                addField(props);
            }
        }
    }
    componentWillUnmount() {
        const { props } = this, { withContext } = props;
        if (withContext) {
            const { context: { deleteField }, } = this;
            if (deleteField) {
                deleteField(props.name);
            }
        }
    }
    componentDidUpdate({ value: prevValue }) {
        const { props: { value, name, withContext }, context: { onChange }, } = this;
        if (prevValue !== value && withContext && onChange) {
            onChange(name, value);
        }
    }
    render() {
        const { props: { name, placeholder, disabled, label, tabIndex, maxLength, autoResize, autoResizeMinHeight, debounceTimeout, min, max, value, withContext, }, context: { fields, disabled: formDisable }, } = this;
        let formValue = value;
        let error = '';
        if (withContext) {
            formValue = !fields[name] ? '' : fields[name].value;
            error = !fields[name] ? '' : fields[name].validation.errorMessage;
        }
        const handleHeight = autoResize ? this.getHandleHeight() : 0;
        return (React.createElement(TextareaWrapperDiv, { autoResize: autoResize, autoResizeMinHeight: autoResizeMinHeight, handleHeight: handleHeight, required: !!error },
            label && React.createElement(Label, { htmlFor: name }, label),
            React.createElement(DebouncedField, { tabIndex: tabIndex, maxLength: maxLength, id: name, name: name, value: formValue, onChange: (value) => this.onChange(value), onBlur: this.onBlur, onFocus: this.onFocus, disabled: disabled || formDisable === FORM_DISABLED_STATE.FORM, placeholder: placeholder, element: "textarea", debounceTimeout: debounceTimeout, min: min, max: max }),
            React.createElement("textarea", { ref: this.$hiddenArea, value: `${formValue}______`, readOnly: true })));
    }
}
TextArea.defaultProps = {
    withContext: true,
};
TextArea.contextType = FormContext;
