import { createLazyComponent } from '../../../components/lazy-loader';
import type { StripeCheckoutProps } from './form';

declare global {
  interface Window {
    __STRIPE_COMPONENTS__?: {
      Elements: any;
      PaymentElement: any;
      LinkAuthenticationElement: any;
      useElements: () => any;
      useStripe: () => any;
      loadStripe: (key: string) => Promise<any>;
    };
  }
}

export default createLazyComponent<React.ComponentType<StripeCheckoutProps>, StripeCheckoutProps>(async () => {
  const [stripeReact, stripe] = await Promise.all([import('@stripe/react-stripe-js'), import('@stripe/stripe-js')]);

  window.__STRIPE_COMPONENTS__ = {
    Elements: stripeReact.Elements,
    PaymentElement: stripeReact.PaymentElement,
    useElements: stripeReact.useElements,
    useStripe: stripeReact.useStripe,
    loadStripe: stripe.loadStripe,
    LinkAuthenticationElement: stripeReact.LinkAuthenticationElement,
  };

  const { default: Component } = await import('./form');
  return Component;
});