import * as React from 'react';
import { oneStorage } from '@skava/persistence';
import { OneFormState } from '@skava/packages/features/Forms';
import { stepperContainer } from '../container';
import { deleteThenAddAddPaymentBinding, } from './state';
import { cartContainer } from '@skava/packages/core/cart/state';
import { StyledAddCardButton, StyledAddCreditCardForm } from './styled';
const renderButtonGroup = () => React.createElement(StyledAddCardButton, null);
const validation = {
    onSubmit(args) {
        // @todo put the below in the serializer of that plugin...
        // const serialized = (args.state.toJSON() as {}) as SerializedAddPaymentType
        const stateAttributes = args.state.inputsList[0].attributes;
        if (stateAttributes.validate()) {
            const { creditCardState } = stateAttributes;
            const { cardNumberState, cvvState, expiryDateState } = creditCardState;
            const { monthState, yearState } = expiryDateState.attributes.expiryDateState;
            const cardNumber = cardNumberState.value;
            const securityCode = cvvState.value;
            const expirationMonth = monthState.value;
            const expirationYear = yearState.value;
            const serialized = {
                cardNumber,
                securityCode,
                expirationMonth,
                expirationYear,
            };
            const { emailAddress, ...remainingProps } = oneStorage.get('shippingAddress');
            const paymentParams = {
                type: 'CREDITCARD',
                creditCard: {
                    number: serialized.cardNumber,
                    cvv: serialized.securityCode,
                    expirationMonth: serialized.expirationMonth,
                    expirationYear: serialized.expirationYear,
                    // on gql end?
                    type: '001',
                    name: '001',
                },
                /**
                 * @todo @@packages !!! NEED TO GET THIS FROM THE BILLING ADDRESS !!!
                 * ^ AND NEED TO NOT USE THE STEPPER ACCORDION CONTAINER TO DO IT!
                 */
                address: { email: emailAddress, ...remainingProps },
                amount: cartContainer.math.grandTotal,
            };
            console.log({ serialized, paymentParams });
            deleteThenAddAddPaymentBinding(paymentParams);
            stepperContainer.handleNext();
        }
    },
};
class AddCreditCardForm extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.observableFormState = new OneFormState().setInputsList([
            {
                type: 'creditCard',
            },
        ]);
    }
    render() {
        return (React.createElement(StyledAddCreditCardForm, { validation: validation, state: this.observableFormState, renderButtonGroup: renderButtonGroup }));
    }
}
export { AddCreditCardForm };
//# sourceMappingURL=AddCreditCardForm.js.map