import CardOnFileComponentConfig from "@pxpio/web-components-sdk/components/cardOnFileComponents/cardOnFileComponent";

const cardOnFileConfig: CardOnFileComponentConfig = {
  limitTokens: number,
  filterBy: {
    excludeExpiredTokens: boolean,
    schemes: string[],
    fundingSource: string,
    issuerCountryCode: string,
    ownerType: string
  },
  orderBy: {
    expiryDate: string,
    scheme: string,
    fundingSource: string,
    ownerType: string,
    issuerCountryCode: string,
    lastUsageDate: {
      orderByField: string
    }
  },
  cardBrandImages: {
    visaSrc: string,
    mastercardSrc: string,
    amexSrc: string,
    cupSrc: string,
    dinersSrc: string,
    discoverSrc: string,
    jcbSrc: string
  },
  expiredText: string,
  validThruText: string,
  deleteModal: {
    dialogAriaLabel: string,
    bodyText: string,
    cancelButtonText: string,
    deleteButtonText: string,
    class: string
  },
  deleteErrorMessage: string,
  deleteSuccessMessage: string,
  updateErrorMessage: string,
  updateSuccessMessage: string,
  successMessageClass: string,
  errorMessageClass: string,
  isExpiryDateEditable: boolean,
  isCvcRequired: boolean,
  allowDeleteToken: boolean,
  cvcComponentConfig: CardCvcComponentConfig,
  expiryDateComponentConfig: CardExpiryDateComponentConfig,
  styles: CSSProperties,
  iconDeleteSrc: string,
  iconSaveSrc: string,
  iconCancelSrc: string,
  iconEditSrc: string,
  inputStyles: CSSProperties,
  tokenItemClass: string,
  useTransparentCardBrandImage: boolean,
  editCardInformationAriaLabel: string,
  saveCardInformationAriaLabel: string,
  cancelEditCardInformationAriaLabel: string,
  deleteCardButtonAriaLabel: string,
  cardNumberAriaLabel: string,
  cardExpiryDateAriaLabel: string,
  onPreRenderTokens: (data: RetrieveCardTokensReponseSuccess) => CardTokenMapping[],
  onRetrieveTokensFailed: (data: RetrieveCardTokensReponseFailed) => void,
  onDeleteTokenSuccess: (data: DeleteCardTokenResponseSuccess) => void,
  onDeleteTokenFailed: (data: DeleteCardTokenResponseFailed) => void,
  onPreDeleteToken: (token: BaseCardToken) => Promise<boolean>,
  onUpdateTokenFailed: (data: UpdateCardTokenResponseFailed) => void,
  onUpdateTokenSuccess: (data: UpdateCardTokenResponseSuccess) => void,
  tokenItemBuilder: (elementIds: TokenBuilderElementIds) => string
  tokenLabelBuilder: (token: BaseCardToken) => string
};

const cardOnFile = pxpCheckoutSdk.create("card-on-file");

import CardOnFileComponentConfig from "@pxpio/web-components-sdk/components/cardOnFileComponents/cardOnFileComponent";

const cardOnFileConfig: CardOnFileComponentConfig = {
  limitTokens: 5,
  filterBy: {
    excludeExpiredTokens: true,
    schemes: ["Visa', 'MasterCard"],
    fundingSource: "Credit",
    issuerCountryCode: "USA",
    ownerType: "Consumer"
  },
  orderBy: {
    expiryDate: { 
      direction: "asc",
      priority: 1
    },
    scheme: { 
      valuesOrder: ["Visa", "MasterCard", "Amex"],
      priority: 2
    },
    fundingSource: { 
      valuesOrder: ["Credit", "Debit"],
      priority: 3
    },
    ownerType: { 
      valuesOrder: ["Consumer", "Commercial"],
      priority: 4
    },
    issuerCountryCode: { 
      direction: "desc",
      priority: 5
    },
    lastUsageDate: { 
      direction: "desc",
      orderByField: "lastSuccessfulPurchaseDate",
      priority: 6
    }
  },
  cardBrandImages: {
    visaSrc: "https://example.com/visa-logo.png",
    mastercardSrc: "https://example.com/mastercard-logo.png",
    amexSrc: "https://example.com/amex-logo.png"
  },
  expiredText: "Card expired",
  validThruText: "Valid until",
  deleteModal: {
    dialogAriaLabel: "Delete card dialog",
    bodyText: "Are you sure you want to delete this payment method?",
    cancelButtonText: "No, keep it",
    deleteButtonText: 'Yes, delete it',
    class: "custom-modal-class"
  },
  deleteErrorMessage: "Unable to delete card. Please try again.",
  deleteSuccessMessage: "Card has been removed successfully.",
  updateErrorMessage: "Unable to update card information. Please try again.",
  updateSuccessMessage: "Card information updated successfully.",
  successMessageClass: "alert alert-success",
  errorMessageClass: "alert alert-danger",
  isExpiryDateEditable: true,
  isCvcRequired: true,
  allowDeleteToken: true,
  cvcComponentConfig: {
    required: true,
    label: "Security code",
    applyMask: true,
    showMaskToggle: true,
    labelPosition: "left",
    errorMessage: "Please enter a valid security code",
    inputStyles: {
      base: {
        color: "#333",
        fontSize: "16px"
      }
    }
  },
  expiryDateComponentConfig: {
    label: "Expiry date",
    labelPosition: "left",
    formatOptions: "MM/YY",
    inputStyles: {
      base: {
        color: "#333",
        fontSize: "16px"
      }
    }
  },
  styles: {
    backgroundColor: "#f8f9fa",
    border: "1px solid #dee2e6",
    borderRadius: "8px",
    padding: "20px"
  },
  iconDeleteSrc: "http://example.com/delete.jpg",
  iconSaveSrc: "http://example.com/save.jpg",
  iconCancelSrc: "http://example.com/cancel.jpg",
  iconEditSrc: "http://example.com/edit.jpg",
  inputStyles: {
    borderRadius: "5px",
    backgroundColor: "grey"
  },
  tokenItemClass: "custom-token-item-class",
  useTransparentCardBrandImage: true,
  editCardInformationAriaLabel: "Edit card information button",
  saveCardInformationAriaLabel: "Save card information button",
  cancelEditCardInformationAriaLabel: "Cancel edit card information button",
  deleteCardButtonAriaLabel: "Delete card button",
  cardNumberAriaLabel: "Card number",
  cardExpiryDateAriaLabel: "Card expiry date",
  onPreRenderTokens: (data: any) => {
    return data.gatewayTokens
      .filter((token: any) => token.issuerCountryCode === "USA")
      .map((token: any) => ({id: token.gatewayTokenId, isCvcRequired: true}));
  },
  onRetrieveTokensFailed: (data: any) => {
    alert("Retrieve tokens failed");
  },
  onDeleteTokenSuccess: (data: any) => {
    alert("Delete successful");
  },
  onDeleteTokenFailed: (data: any) => {
    alert("Delete failed");
  },
  onPreDeleteToken: (token: any) => {
    return new Promise((resolve) => {
      if (confirm("Are you sure to delete this token?")) resolve(true);
      resolve(false);
    });
  },
  onUpdateTokenFailed: (data: any) => {
    alert("Update failed");
  },
  onUpdateTokenSuccess: (data: any) => {
    alert("Update successful");
  },
  tokenItemBuilder: (config: any) => {
    return `<div>
      <div id="${config.tokenImageId}"></div>
      <div id="${config.tokenLabelId}"></div> 
      <div id="${config.editButtonId}"></div> 
      <div id="${config.deleteButtonId}"></div> 
      </div>`;
  },
  tokenLabelBuilder: (token: any) => 
    `${token.maskedPrimaryAccountNumber} - ${token.issuerName}`
};

const cardOnFile = pxpCheckoutSdk.create("card-on-file");