export type CheckoutOptions = {
  /**
   * Checkout id retrieved from an API call to /v2/checkout
   */
  checkoutId: string;
  /**
   * Entity id, needs to match the entity id used to create the checkout.
   */
  key: string;
  /**
   * Options for the Checkout UI.
   */
  options?: {
    /**
     * Custom ordering of payment methods.
     *
     * e.g.
     * {
     *  card: 1,
     *  mobicred: 2,
     *  payflex: 3,
     * }
     *
     */
    ordering?: Record<string, number>;
  };
  /**
   * Event handlers.
   *
   * Hook into Checkout events, and perform actions when they occur.
   */
  eventHandlers?: {
    /**
     * Event handlers fired when Checkout has completed successfully.
     * @param event Details about the transaction.
     * @returns Void
     */
    onCompleted?: (event: CompletedCheckoutEvent) => void;
    /**
     * Event fired when Checkout has cancelled by the user.
     * @param event Details about the Checkout.
     * @returns Void
     */
    onCancelled?: (event: CheckoutEvent) => void;
    /**
     * Event fired when Checkout has timed out.
     * @param event Details about the Checkout.
     * @returns Void
     */
    onExpired?: (event: CheckoutEvent) => void;
    /**
     * Event fired just before submission of a payment.
     *
     * Can be used to block the payment from being submitted.
     * Return true to allow payment, anything else (including no return) blocks it and shows an error message to the user.
     * For blocked payments, the parent page should handle redirecting or unmounting checkout.
     * If not handled, an error message is shown to the user.
     *
     * @example
     * onBeforePayment: async () => {
     *   try {
     *     const isValid = await validatePayment();
     *     if (isValid) return true;
     *     throw new Error("Product out of stock!");
     *   } catch (error) {
     *     // Payment blocked, parent page should handle redirect/unmount
     *     // Handle redirecting or unmounting
     *   }
     * }
     *
     * @returns {true|Promise<true>|void} True to proceed with payment, anything else (or no return) to block it
     */
    onBeforePayment?: () => true | Promise<true> | void;
  };
  /**
   * Customisations for the UI.
   */
  customisations?: {
    /**
     * Controls visibility of the cancel button
     * @default true
     */
    showCancelButton?: boolean;
    /**
     * Controls visibility of the amount field
     * @default true
     */
    showAmountField?: boolean;
    /**
     * Controls visibility of the card brand display
     * @default true
     */
    showCardBrandDisplay?: boolean;
    /**
     * Custom theme options
     */
    theme?: {
      brand?: {
        primary?: string;
        secondary?: string;
      };
      cards?: {
        background?: string;
        backgroundHover?: string;
      };
    };
    /**
     * Card-specific UI customisation options
     */
    card?: {
      /**
       * Text to display on the submit button
       * @default "Pay Now"
       */
      submitButtonText?: string;
      /**
       * Controls visibility of the card icon
       * @default true
       */
      showCardIcon?: boolean;
      /**
       * Text to show above the card payment in an h3
       * @default "Please enter your card details below to complete the payment."
       */
      headingText?: string;
    };
  };
};

export type RenderCheckout = {
  /**
   * Render Embedded Checkout into an HTML element.
   * @param container ID of the HTML element to render Embedded Checkout into, or a direct reference to the HTML element itself.
   */
  render: (container: string | HTMLElement) => void;
  /**
   * Remove Embedded Checkout from being rendered.
   *
   * NOTE: The same Checkout ID cannot be reused for another render attempt, a new ID will need to be generated.
   */
  unmount: () => void;
};

export type Checkout = {
  /**
   * Initiate a Checkout UI experience.
   * @param options Options for the Checkout experience.
   * @returns An object that can be used to render the Checkout UI or to unmount the Checkout UI.
   */
  initiate: (options: CheckoutOptions) => RenderCheckout;
};

checkout.render("#peachpayments-checkout");

const checkoutElement = document.getElementById("peachpayments-checkout");
checkout.render(checkoutElement);

export type CheckoutEventHandlers = {
  onCompleted?: (event: CompletedCheckoutEvent) => void;
  onCancelled?: (event: CheckoutEvent) => void;
  onExpired?: (event: CheckoutEvent) => void;
  onBeforePayment?: () => true | Promise<true> | void;
};

export type CheckoutEvent = {
  amount: number;
  checkoutId: string;
  currency: string;
  merchantTransactionId: string;
  paymentType: "DB" | "PA";
  result: {
    code: string;
    description: string;
  };
  signature: string;
  timestamp: Date;
};

export type CompletedCheckoutEvent = CheckoutEvent & {
  id: string;
  merchant: {
    name: string;
  };
  paymentBrand: string;
  resultDetails: {
    AcquirerResponse: string;
    ConnectorTxID1: string;
    ExtendedDescription: string;
  };
};

{
  amount: number;
  checkoutId: string;
  currency: string;
  merchantTransactionId: string;
  paymentType: "DB";
  result: {
    code: string;
    description: string;
  }
  signature: string;
  timestamp: Date;
  id: string;
}

eventHandlers: {
  onBeforePayment: async () => {
    try {
      const isValid = await validatePayment();
      if (isValid) return true;
      throw new Error("Product out of stock!");
    } catch (error) {
      // Payment blocked, handle redirect/unmount
    }
  };
}

type Theme = {
  brand?: {
    primary?: string;
    secondary?: string;
  };
  cards?: {
    background?: string;
    backgroundHover?: string;
  };
};

{
  MASTERPASS: 1,
  "1FORYOU": 2,
  MOBICRED: 3,
  CARD: 4,
}

type Customisations = {
  showCancelButton?: boolean;
  showAmountField?: boolean;
  showCardBrandDisplay?: boolean;
  theme?: Theme;
  card?: {
    submitButtonText?: string;
    showCardIcon?: boolean;
    headingText?: string;
  };
};

// Deprecated
{
  events: {
    onCompleted: (event) => {
      /* ... */
    };
  }
}

// Use this instead
{
  eventHandlers: {
    onCompleted: (event) => {
      /* ... */
    };
  }
}

// Deprecated
{
  options: {
    theme: { /* ... */ },
    enableCancelButton: false,
    enableAmountField: false,
    enableCardBrandDisplay: false
  }
}

// Use this instead
{
  customisations: {
    theme: { /* ... */ },
    showCancelButton: false,
    showAmountField: false,
    showCardBrandDisplay: false
  }
}