"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const react_stripe_elements_1 = require("react-stripe-elements");
const handleChange = change => {
    console.log("[change]", change);
};
const createOptions = (fontSize, padding) => {
    return {
        style: {
            base: {
                fontSize,
                color: "#424770",
                letterSpacing: "0.025em",
                fontFamily: "Source Code Pro, monospace",
                "::placeholder": {
                    color: "#aab7c4"
                },
                padding
            },
            invalid: {
                color: "#9e2146"
            }
        }
    };
};
class CardSection extends React.Component {
    constructor() {
        super(...arguments);
        this.handleSubmit = ev => {
            ev.preventDefault();
            console.log("Submit");
        };
    }
    render() {
        const { classes } = this.props;
        return (React.createElement("div", { className: classes.cardContainer },
            React.createElement("form", { className: classes.cardForm, onSubmit: this.handleSubmit },
                React.createElement("label", { className: classes.cardLabel },
                    "Card number",
                    React.createElement(react_stripe_elements_1.CardNumberElement, Object.assign({ className: classes.cardInput, onChange: handleChange }, createOptions(this.props.fontSize, "15px")))),
                React.createElement("label", { className: classes.cardLabel },
                    "Expiration date",
                    React.createElement(react_stripe_elements_1.CardExpiryElement, Object.assign({ className: classes.cardInput, onChange: handleChange }, createOptions(this.props.fontSize, "15px")))),
                React.createElement("label", { className: classes.cardLabel },
                    "CVC",
                    React.createElement(react_stripe_elements_1.CardCVCElement, Object.assign({ className: classes.cardInput, onChange: handleChange }, createOptions(this.props.fontSize, "15px")))),
                React.createElement("label", { className: classes.cardLabel },
                    "Postal code",
                    React.createElement(react_stripe_elements_1.PostalCodeElement, Object.assign({ className: classes.cardInput, onChange: handleChange }, createOptions(this.props.fontSize, "15px")))),
                React.createElement("button", { className: classes.cardButton }, "Pay"))));
    }
}
exports.default = CardSection;
//# sourceMappingURL=CardSection.js.map