"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = require("react");
const mobx_react_1 = require("xmobx/mobx-react");
const utils_1 = require("@skava/utils");
const inputs_1 = require("../../inputs");
const validators_1 = require("../../../validators");
const styled_1 = require("./styled");
let TextAreaPlugin = class TextAreaPlugin extends React.Component {
    constructor() {
        super(...arguments);
        this.renderWrap = (props) => {
            const remainingProps = utils_1.omit(props, [
                'isActive',
                'data-qa',
                'aria-label',
                'onChange',
                'onFocus',
                'onBlur',
                'identifier',
                'value',
                'label',
                'tooltip',
                'type',
                // isRequired?
                'required',
                'maxLength',
                'minLength',
                'placeholder',
            ]);
            return React.createElement(styled_1.StyledTextAreaWrap, Object.assign({}, remainingProps), props.children);
        };
        this.renderInput = (props) => {
            const dataQa = props['data-qa'] || props['dataQa'];
            return (React.createElement(styled_1.StyledTextArea, { isValid: props.isValid, isActive: props.isActive, isDirty: props.isDirty, "data-qa": dataQa, "aria-label": props['aria-label'] || props.label || props.labelText, "aria-invalid": props.isValid === false, 
                // events
                onChange: props.onChange, 
                // @note - these were in wrapper, which did not work well...
                onFocus: props.onFocus, onBlur: props.onBlur, onKeyPress: props.onKeyPress, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, 
                // browser
                id: props.identifier, value: props.value, type: props.type, 
                // need to manage spreading these...
                minLength: props.minLength, maxLength: props.maxLength, required: props.required, placeholder: props.placeholder, disabled: props.isDisabled, autoComplete: props.autoComplete, autoFocus: props.autoFocus, 
                // name
                name: props.propertyName }));
        };
    }
    static isSatisfiedByProps(props) {
        return ['textarea'].includes(props.type);
    }
    render() {
        const _a = this.props, { ref, className } = _a, remainingProps = tslib_1.__rest(_a, ["ref", "className"]);
        return (React.createElement(inputs_1.ObserverInput, Object.assign({ renderWrap: this.renderWrap, renderInput: this.renderInput, className: className }, remainingProps)));
    }
};
TextAreaPlugin.defaultState = (inputState) => {
    return {
        validator: (value) => validators_1.isValid(value, 'required') || validators_1.errorMessageFor('required'),
    };
};
TextAreaPlugin = tslib_1.__decorate([
    mobx_react_1.observer
], TextAreaPlugin);
exports.TextAreaPlugin = TextAreaPlugin;
//# sourceMappingURL=TextAreaPlugin.js.map