import * as React from 'react';
import { OneFormState } from '@skava/packages/features/Forms';
import { cartContainer } from '@skava/packages/core/cart/state';
import { stepperContainer } from '../container';
import { StyledSecurityForm, StyledAddCardButton } from './styled';
import { paymentMethodsContainer, deleteThenAddAddPaymentBinding } from './state';
const renderButtonGroup = () => React.createElement(StyledAddCardButton, null);
/**
 * @see /src/packages/pages/Checkout/sections/PaymentMethods/AddCreditCardForm.tsx#22
 */
const securityValidation = {
    onSubmit(args) {
        if (args.state.isValid) {
            stepperContainer.handleNext();
        }
    },
    /**
     * hm, seems to come 1 too late...
     */
    onChange(args) {
        if (args.state.isValid) {
            console.debug('[change] valid ! now submit :P');
        }
        const [securityCodeValue] = Object.values(args.state.toJSON());
        const { activeSavedCard } = paymentMethodsContainer;
        console.log({ securityCodeValue, state: args.state, activeSavedCard });
        const HACK_PARAMS = {
            type: 'CREDITCARD',
            creditCard: {
                id: activeSavedCard.cardId,
                cvv: securityCodeValue,
            },
            amount: cartContainer.math.grandTotal,
        };
        deleteThenAddAddPaymentBinding(HACK_PARAMS);
    },
};
class SecurityCodeForm extends React.PureComponent {
    constructor() {
        super(...arguments);
        /**
         * @@packages @todo plugin (needs show & hide password, not sure why it does not show here)
         */
        this.observableFormState = new OneFormState().setInputsList([
            {
                // type: 'ccv',
                autoComplete: 'cc-csc',
                label: 'ccv (?)',
                type: 'number',
                pattern: '([d][d][d])',
                minLength: 3,
                maxLength: 4,
            },
        ]);
    }
    render() {
        return (React.createElement(StyledSecurityForm, { validation: securityValidation, state: this.observableFormState, renderButtonGroup: renderButtonGroup }));
    }
}
export { SecurityCodeForm };
//# sourceMappingURL=SecurityCodeForm.js.map