import ClickOnceComponentConfig from "@pxpio/web-components-sdk/src/components/clickOnceStandaloneComponents/types/ClickOnceStandaloneComponentConfig";

const clickOnceStandaloneConfig: ClickOnceStandaloneComponentConfig = {
  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
  },
  isCvcRequired: boolean,
  cvcComponentConfig: CardCvcComponentConfig,
  hideCardBrandLogo: boolean,
  expiredText: string,
  validThruText: string,
  submitText: string,
  disableCardSelection: boolean,
  isRenderLastPurchaseCard: boolean,
  isRenderLastPayoutCard: boolean,
  isProcessNextStepOnCardClick: boolean,
  class: string,
  selectTokenItemClass: string,
  useTransparentCardBrandImage: boolean,
  selectCardButtonAriaLabel: string,
  label: string,
  labelAriaLabel: string,
  submitAriaLabel: string,
  cardNumberAriaLabel: string,
  cardExpiryDateAriaLabel: string,
  onOnceCardClick:() => void,
  buttonBuilder: (elementIds: ClickOnceButtonBuilderElementIds) => string,
  selectTokenItemBuilder: (elementIds: ClickOnceSelectTokenBuilderElementIds) => string,
  onPreRenderTokens: (data: RetrieveCardTokensReponseSuccess) => CardTokenMapping[]
}

const clickOnce = pxpCheckoutSdk.create("click-once-standalone");

import ClickOnceComponentConfig from "@pxpio/web-components-sdk/src/components/clickOnceStandaloneComponents/types/ClickOnceStandaloneComponentConfig";

const clickOnceStandaloneConfig: ClickOnceStandaloneComponentConfig = {
  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"
  },
  cvcRequired: 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"
    }
  },
  hideCardBrandLogo: false,
  expiredText: "Card expired",
  validThruText: "Valid until",
  submitText: "Pay now",
  disableCardSelection: false,
  isRenderLastPurchaseCard: true,
  isRenderLastPayoutCard: true,
  isProcessNextStepOnCardClick: true,
  class: "custom-class",
  selectTokenItemClass: "custom-select-token-item-class",
  useTransparentCardBrandImage: true,
  selectCardButtonAriaLabel: "Select card",
  label: "Click once to pay",
  labelAriaLabel: "Click once to pay",
  submitAriaLabel: "Submit",
  cardNumberAriaLabel: "Card number",
  cardExpiryDateAriaLabel: "Card expiry date",
  onOnceCardClick:() => console.log("Card clicked"),
  tokenItemBuilder: (config: ClickOnceButtonBuilderElementIds) => {
    return `<div>
      <div id="${config.tokenImageId}"></div>
      <div id="${config.tokenLabelId}"></div> 
      <div id="${config.cvcComponentId}"></div> 
      <div id="${config.payNowId}"></div> 
    </div>`
  },
  selectTokenItemBuilder: (elementIds: ClickOnceSelectTokenBuilderElementIds) => {
    return `<div>
      <div id="${elementIds.tokenImageId}"></div>
      <div id="${elementIds.cardNumberId}"></div>
      <div id="${elementIds.expiryDateId}"></div>
    </div>`
  }, 
  onPreRenderTokens: (data: RetrieveCardTokensReponseSuccess) => {
    return data.gatewayTokens.filter((token) => token.issuerCountryCode === 'USA').map((token) => ({id: token.gatewayTokenId, isCvcRequired: true}))
  },
  onPreRenderTokens?: (data: RetrieveCardTokensReponseSuccess) => CardTokenMapping[]
}
  
const clickOnceStandalone = pxpCheckoutSdk.create("click-once-standalone");