import { createElement, Payment } from "@airwallex/components-sdk";
import { AirwallexCardElements } from "@/types/checkout/type";

type ElementType =
  | Payment.CardNumberElementType
  | Payment.CvcElementType
  | Payment.ExpiryDateElementType;


class AirwallexManager {
  private elements: AirwallexCardElements = {};

  private listeners = new Map<ElementType, Map<Payment.SplitElementEventCode, boolean>>();

  private created = false;

  async init() {
    if (this.created) return;
    this.created = true;
  }

  async createElements() {
    if (this.elements.cardNumber) return this.elements;

    const cardNumber = await createElement("cardNumber");
    const cvc = await createElement("cvc");
    const expiry = await createElement("expiry");

    this.elements = { cardNumber, cvc, expiry };

    return this.elements;
  }

  mount(containerIds: {
    cardNumber: string;
    cvc: string;
    expiry: string;
  }) {
    this.elements.cardNumber?.mount(containerIds.cardNumber);
    this.elements.cvc?.mount(containerIds.cvc);
    this.elements.expiry?.mount(containerIds.expiry);
  }

  unmount() {
    this.elements.cardNumber?.unmount();
    this.elements.cvc?.unmount();
    this.elements.expiry?.unmount();
  }

  on<EventCode extends Payment.SplitElementEventCode>(el: ElementType, event: EventCode, handler: Payment.SplitElementEventHandler<EventCode>) {
    let eventMap = this.listeners.get(el);
    
    if (!eventMap) {
      eventMap = new Map<Payment.SplitElementEventCode, boolean>([[event, false]]);
      this.listeners.set(el, eventMap);
    }
    if(eventMap.get(event)) return; // 注册过就返回

    el.on(event, handler);

    eventMap.set(event,true);
    
  }



  destroy() {
    const { cardNumber, cvc, expiry } = this.elements;

    [cardNumber, cvc, expiry].forEach((el) => {
      if (!el) return;
      el.unmount();
      el.destroy();
    });

    this.elements = {};
  }

  getElements() {
    return this.elements;
  }
}

export const airwallexManager = new AirwallexManager();