"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const React = require("react");
const validators_1 = require("../../../validators");
const ObserverInput_1 = require("../../inputs/ObserverInput");
const InputState_1 = require("../../inputs/InputState");
const CreditCardExpiryDatePlugin_1 = require("../CreditCardExpiryDatePlugin");
const securityCodeValidator = (value) => validators_1.isValidSecurityCode(value) || validators_1.errorMessageFor('securityCode');
const creditCardValidator = (value) => validators_1.isValidCreditCard(value) || validators_1.errorMessageFor('creditCard');
class CreditCardPlugin extends React.Component {
    static isSatisfiedByProps(props) {
        return props.type === 'creditCard';
    }
    render() {
        const _a = this.props, { state } = _a, props = tslib_1.__rest(_a, ["state"]);
        const { cardNumberState, cvvState, expiryDateState, } = state.attributes.creditCardState;
        // change (setValue), blur (validate, props onblur)
        /**
         * <>
         *   <card #>
         *   <>
         *    <expire year>
         *    <expire month>
         *   </>
         *   <cvv>
         * </>
         */
        return (React.createElement(React.Fragment, null,
            React.createElement(ObserverInput_1.ObserverInput, { state: cardNumberState, autoComplete: "cc-number", label: "credit card number", pattern: "[0-9\\- ]+", minLength: 7, maxLength: 16 }),
            React.createElement(CreditCardExpiryDatePlugin_1.ExpiryDatePlugin, { state: expiryDateState }),
            React.createElement(ObserverInput_1.ObserverInput, { state: cvvState, autoComplete: "cc-csc", label: "ccv (?)", type: "number", pattern: "([\\d][\\d][\\d])", minLength: 3, maxLength: 3, max: 999 })));
    }
}
CreditCardPlugin.defaultState = (inputState) => {
    // @todo could move this to `CreditCardState`
    const cardNumberState = new InputState_1.InputState();
    const cvvState = new InputState_1.InputState();
    const expiryDateState = new InputState_1.InputState();
    // adds attributes
    CreditCardExpiryDatePlugin_1.ExpiryDatePlugin.defaultState(expiryDateState);
    cvvState.setValidator(securityCodeValidator);
    cardNumberState.setValidator(creditCardValidator);
    inputState.attributes.creditCardState = {
        cardNumberState,
        cvvState,
        expiryDateState,
    };
    return {
        serialize: ($inputState) => {
            return {
                cardNumber: cardNumberState.toJSON(),
                cvv: cvvState.toJSON(),
                expiryDate: expiryDateState.toJSON(),
            };
        },
        validate: (value) => {
            return (cardNumberState.isValid && cvvState.isValid && expiryDateState.isValid);
        },
    };
};
exports.CreditCardPlugin = CreditCardPlugin;
exports.default = CreditCardPlugin;
//# sourceMappingURL=CreditCardPlugin.js.map