'use strict';

var index = require('./index-p7cvUYAE.js');
var skeleton = require('./skeleton-DvRCiQlA.js');
var configState = require('./config-state-BIgGhhe9.js');
var utils = require('./utils-CYONRFR6.js');
var checkPkgVersion = require('./check-pkg-version-B9EoYyZR.js');
require('./parts-BXshb_S-.js');
require('./index-W-zoNiyM.js');
require('./dinero-BwNN_k7x.js');
require('./package-YyJzVqrh.js');

const CardFormSkeleton = (props) => {
    const { isReady } = props;
    if (isReady) {
        return null;
    }
    return (index.h("div", { class: "container-fluid p-0" }, index.h("div", { class: "mb-3" }, index.h(skeleton.Skeleton, { height: "18px", width: "100px" }), index.h(skeleton.Skeleton, { height: "36px" })), index.h("div", { class: "row" }, index.h("div", { class: "col-4 align-content-end" }, index.h(skeleton.Skeleton, { height: "18px", width: "80px" }), index.h(skeleton.Skeleton, { height: "36px" })), index.h("div", { class: "col-4 align-content-end" }, index.h(skeleton.Skeleton, { height: "36px" })), index.h("div", { class: "col-4 align-content-end" }, index.h(skeleton.Skeleton, { height: "18px", width: "30px" }), index.h(skeleton.Skeleton, { height: "36px" })))));
};

const CardForm = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.isReady = false;
    }
    async componentWillLoad() {
        await configState.waitForConfig();
        this.iframeOrigin = configState.configState.iframeOrigin;
        this.tabId = utils.generateTabId();
        checkPkgVersion.checkPkgVersion();
    }
    componentDidRender() {
        const elements = [
            this.cardNumberIframeElement,
            this.expirationMonthIframeElement,
            this.expirationYearIframeElement,
            this.cvvIframeElement,
        ];
        Promise.all(elements.map((element) => {
            return new Promise((resolve) => {
                element.addEventListener('iframeLoaded', () => { resolve(); });
            });
        })).then(() => {
            this.isReady = true;
        });
    }
    async validate() {
        const cardNumberIsValid = await this.cardNumberIframeElement.validate();
        const expirationMonthIsValid = await this.expirationMonthIframeElement.validate();
        const expirationYearIsValid = await this.expirationYearIframeElement.validate();
        const cvvIsValid = await this.cvvIframeElement.validate();
        return cardNumberIsValid && expirationMonthIsValid && expirationYearIsValid && cvvIsValid;
    }
    async tokenize({ clientId, paymentMethodMetadata, account, }) {
        const result = await this.cardNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
        return result;
    }
    render() {
        return (index.h("div", { key: 'd3cb1fca6595f60e5f5f122b73d3d6c11a826423' }, index.h(CardFormSkeleton, { key: 'f83dcbbc214d460bb21c015ec051436ed5cf6670', isReady: this.isReady }), index.h("hidden-input", { key: '5fad0d06303d0ddb55c30c2cd94014255f2a8cec' }), index.h("div", { key: '68440756a1aad69b5c95245e7a2a5feb16899dca', class: "container-fluid p-0", style: {
                opacity: this.isReady ? '1' : '0',
                height: this.isReady ? 'auto' : '0',
            } }, index.h("div", { key: 'b39eab56c79463935f1a1bb15cc867997f026e7b', class: "mb-3" }, index.h("iframe-input", { key: '25a2390a8c3c92d5e6eceafe6b821202ecb22d76', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), index.h("div", { key: '68766798d954a0b3d093ae13c3c2955f819da4f2', class: "row" }, index.h("div", { key: '05539f1ac8ebb0397574d55b4b76d7acdb7d2dca', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '4c437a4384e6c301e18824d799784c1133e70ee3', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), index.h("div", { key: 'b9a5b8b5dda1d8ab6305c9dc1ef9b655eb02fb3d', class: "col-4 align-content-end" }, index.h("iframe-input", { key: 'c1a412c20e75d21c1084a4b93f22362c367c1907', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), index.h("div", { key: 'abdfdbd7eb784871011397a7c5fdf371e3c6baf0', class: "col-4 align-content-end" }, index.h("iframe-input", { key: '08dff072e785846d7543018c194b4df6ce5b343e', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
    }
};

exports.card_form = CardForm;
