import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
import { S as Skeleton } from './skeleton.js';
import { w as waitForConfig, c as configState } from './config-state.js';
import { d as generateTabId } from './utils2.js';
import { c as checkPkgVersion } from './check-pkg-version.js';
import { d as defineCustomElement$2 } from './hidden-input2.js';
import { d as defineCustomElement$1 } from './iframe-input2.js';

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

const CardForm = /*@__PURE__*/ proxyCustomElement(class CardForm extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.isReady = false;
    }
    async componentWillLoad() {
        await waitForConfig();
        this.iframeOrigin = configState.iframeOrigin;
        this.tabId = generateTabId();
        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 (h("div", { key: 'd3cb1fca6595f60e5f5f122b73d3d6c11a826423' }, h(CardFormSkeleton, { key: 'f83dcbbc214d460bb21c015ec051436ed5cf6670', isReady: this.isReady }), h("hidden-input", { key: '5fad0d06303d0ddb55c30c2cd94014255f2a8cec' }), h("div", { key: '68440756a1aad69b5c95245e7a2a5feb16899dca', class: "container-fluid p-0", style: {
                opacity: this.isReady ? '1' : '0',
                height: this.isReady ? 'auto' : '0',
            } }, h("div", { key: 'b39eab56c79463935f1a1bb15cc867997f026e7b', class: "mb-3" }, h("iframe-input", { key: '25a2390a8c3c92d5e6eceafe6b821202ecb22d76', inputId: "cardNumber", ref: (el) => (this.cardNumberIframeElement = el), label: "Card Number", iframeOrigin: `${this.iframeOrigin}/v2/cardNumber?tabId=${this.tabId}` })), h("div", { key: '68766798d954a0b3d093ae13c3c2955f819da4f2', class: "row" }, h("div", { key: '05539f1ac8ebb0397574d55b4b76d7acdb7d2dca', class: "col-4 align-content-end" }, h("iframe-input", { key: '4c437a4384e6c301e18824d799784c1133e70ee3', inputId: "expirationMonth", ref: (el) => (this.expirationMonthIframeElement = el), label: "Expiration", iframeOrigin: `${this.iframeOrigin}/v2/expirationMonth?tabId=${this.tabId}` })), h("div", { key: 'b9a5b8b5dda1d8ab6305c9dc1ef9b655eb02fb3d', class: "col-4 align-content-end" }, h("iframe-input", { key: 'c1a412c20e75d21c1084a4b93f22362c367c1907', inputId: "expirationYear", ref: (el) => (this.expirationYearIframeElement = el), label: "", iframeOrigin: `${this.iframeOrigin}/v2/expirationYear?tabId=${this.tabId}` })), h("div", { key: 'abdfdbd7eb784871011397a7c5fdf371e3c6baf0', class: "col-4 align-content-end" }, h("iframe-input", { key: '08dff072e785846d7543018c194b4df6ce5b343e', inputId: "CVV", ref: (el) => (this.cvvIframeElement = el), label: "CVV", iframeOrigin: `${this.iframeOrigin}/v2/CVV?tabId=${this.tabId}` }))))));
    }
}, [256, "card-form", {
        "isReady": [32],
        "iframeOrigin": [32],
        "tabId": [32],
        "validate": [64],
        "tokenize": [64]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["card-form", "hidden-input", "iframe-input"];
    components.forEach(tagName => { switch (tagName) {
        case "card-form":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, CardForm);
            }
            break;
        case "hidden-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "iframe-input":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { CardForm as C, defineCustomElement as d };
