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>;
    /**
     * Configure which payment methods (https://developer.peachpayments.com/docs/pp-payment-methods#south-africa) are shown to the customer without making changes to your Peach Payments account configuration.
     *
     * Although you can specify both `include` and `exclude` at the same time, it's more likely you'd want to do one or the other.
     * 
     * @example
     * {
     *  include: ["CARD", "MOBICRED"],
     *  exclude: ["PAYFLEX"],
     * }
     */
    paymentMethods?: {
      /**
       * Include specific payment methods.
       */
      include?: string[];
      /**
       * Exclude specific payment methods.
       */
      exclude?: string[];
    };
  };
  /**
   * 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?: {
      /**
      * Supports web safe or Google fonts, for example, `TIMES NEW ROMAN`, `MONOSPACE`, and so on.
      */
      fontFamily?: string;
      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;
      /**
       * List of card brands to show, enabling you to disable and hide card brands without having to change your Peach Payments account configuration. 
       * For example, if you are configured for Visa, Mastercard, and Amex, but only want to show and accept Visa, you can do that without having to change your Peach Payments account configuration.
       * 
       * If you do not provide any brands (or provide invalid brands), all brands show.
       * 
       * @default all brands - ["VISA", "MASTERCARD", "AMERICAN EXPRESS", "DINERS CLUB"]
       */
      brands?: 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;
  };
};

type Theme = {
  fontFamily?: string;
};

options?: {
  ordering?: {
    MASTERPASS: 1;
    "1FORYOU": 2;
    MOBICRED: 3;
    MOBICRED: 4;
  };
  paymentMethods?: {
     include: ["MASTERPASS", "1FORYOU", "MOBICRED", "CARD"],
     exclude: ["PAYFLEX"],
  };
}

type Customisations = {
  showCancelButton?: boolean;
  showAmountField?: boolean;
  showCardBrandDisplay?: boolean;
  theme?: Theme;
  card?: {
    submitButtonText?: string;
    showCardIcon?: boolean;
    headingText?: string;
    brands?: 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
  }
}