import React from 'react';
import { forRef } from "../../../decorators";
import { isUndefined } from "../../../utils";
import { FORM } from "../../../constants";
const { FORM_DISABLED_STATE } = FORM;
import { FONT_VARIANTS } from "../../../globalStyled";
const { body2Regular } = FONT_VARIANTS;
import { FormContext } from '../Form';
import DebouncedField from '../DebouncedField';
import { InputWrapperDiv, LabelText } from './styled';
class InputC extends React.Component {
    constructor() {
        super(...arguments);
        this.$ref = React.createRef();
        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);
            }
        };
        this.onChange = (currentValue) => {
            const { props: { name, connectTo, mask, withContext }, context: { onChange: onChangeForm }, } = this;
            if (currentValue && mask && !this.checkByMask(currentValue)) {
                return false;
            }
            if (connectTo) {
                if (Array.isArray(connectTo)) {
                    connectTo.forEach(({ name: fieldName, handler }) => onChangeForm(fieldName, handler ? handler(currentValue) : currentValue));
                }
                else {
                    const { name: fieldName, handler } = connectTo;
                    onChangeForm(fieldName, handler ? handler(currentValue) : currentValue);
                }
            }
            const { onChange } = this.props;
            if (onChange) {
                onChange(currentValue);
            }
            if (withContext) {
                onChangeForm(name, currentValue);
            }
        };
    }
    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, withContext }, } = this;
        if (prevValue !== value && withContext) {
            this.onChange(value);
        }
    }
    checkByMask(val) {
        const { mask } = this.props;
        return mask === null || mask === void 0 ? void 0 : mask.test(val);
    }
    render() {
        var _a, _b;
        const { props: { name, maxLength, placeholder, disabled, autocomplete, label, tabIndex, autoFocus, withContext, min, max, className, mask, value: handledValue, debounceTimeout, clearInput, clearValue, minLength, hidden, }, context: { fields, disabled: formDisable }, } = this;
        let formValue = '';
        let error = '';
        if (withContext) {
            formValue = fields[name] && fields[name].value ? fields[name].value : '';
            error = !fields[name] ? '' : (_b = (_a = fields[name]) === null || _a === void 0 ? void 0 : _a.validation) === null || _b === void 0 ? void 0 : _b.errorMessage;
        }
        const value = isUndefined(handledValue) ? formValue : handledValue;
        return (React.createElement(InputWrapperDiv, { clearInput: clearInput, required: !!error, className: className },
            label && React.createElement(LabelText, { variant: body2Regular }, label),
            React.createElement(DebouncedField, { tabIndex: tabIndex, id: name, name: name, value: value || '', maxLength: maxLength || 250, onBlur: (e) => this.onBlur(e), onChange: (value) => this.onChange(value), onFocus: (e) => this.onFocus(e), placeholder: placeholder, disabled: disabled || formDisable === FORM_DISABLED_STATE.FORM, autoComplete: autocomplete, autoFocus: autoFocus, min: min, max: max || 999999999, debounceTimeout: debounceTimeout, mask: mask, ref: this.$ref, clearValue: clearValue, minLength: minLength, hidden: hidden })));
    }
}
InputC.defaultProps = {
    image: 'question',
    type: 'text',
    withContext: true,
};
InputC.contextType = FormContext;
export const Input = forRef(InputC);
