"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 validators_1 = require("../../validators");
const inputs_1 = require("../inputs");
let NamePlugin = class NamePlugin extends React.Component {
    static isSatisfiedByProps(props) {
        return ['firstName', 'middleName', 'lastName'].includes(props.type);
    }
    render() {
        const _a = this.props, { ref } = _a, props = tslib_1.__rest(_a, ["ref"]);
        return (React.createElement(inputs_1.ObserverInput, Object.assign({}, props, { 
            // labelText?
            label: props.state.label, type: "text", minLength: 1, pattern: "[a-zA-Z0-9]+" })));
    }
};
// used by state
NamePlugin.defaultState = (state) => {
    const validator = (value) => validators_1.isValidName(value) || validators_1.errorMessageFor('name');
    switch (state.type) {
        case 'firstName':
            return {
                propertyName: 'firstName',
                'data-qa': 'qa-first-name',
                autocomplete: 'given-name',
                // @todo animated placeholder
                label: 'First Name',
                // placeholder: 'First Name...',
                required: true,
                validator,
            };
        case 'middleName':
            return {
                propertyName: 'middleName',
                // @todo animated placeholder
                label: 'Middle Name',
                // placeholder: 'Middle Name...',
                autocomplete: 'additional-name',
                dataQa: 'qa-additional-name',
                required: false,
                validator,
            };
        case 'lastName':
            return {
                propertyName: 'lastName',
                // @todo animated placeholder
                label: 'Last Name',
                // placeholder: 'Last Name...',
                dataQa: 'qa-last-name',
                autocomplete: 'family-name',
                required: true,
                validator,
            };
    }
};
NamePlugin = tslib_1.__decorate([
    mobx_react_1.observer
], NamePlugin);
exports.NamePlugin = NamePlugin;
exports.default = NamePlugin;
//# sourceMappingURL=NamePlugin.js.map