<ActionCardContainer
  class="prepaid-card-choice"
  @header="Business Account"
  @isComplete={{@isComplete}}
  {{did-insert this.checkForPendingTransaction}}
  data-test-prepaid-card-choice-is-complete={{@isComplete}}
>
  <ActionCardContainer::Section @title="Choose a prepaid card to pay the business account creation fee">
    <CardPay::LabeledValue @label="Business Name">
      <CardPay::Merchant
        @name={{@workflowSession.state.merchantName}}
        @size="small"
        @logoBackground={{@workflowSession.state.merchantBgColor}}
        @logoTextColor={{@workflowSession.state.merchantTextColor}}
      />
    </CardPay::LabeledValue>
    <CardPay::LabeledValue @label="Business ID" data-test-prepaid-card-choice-merchant-id>
      {{@workflowSession.state.merchantId}}
    </CardPay::LabeledValue>
    <CardPay::LabeledValue @label="Business Account Creation Fee">
      <CardPay::BalanceDisplay
        class="prepaid-card-choice__cost"
        @icon="spend"
        @sign="§"
        @symbol="SPEND"
        @balance={{format-amount this.merchantRegistrationFee}}
        @usdBalance={{spend-to-usd this.merchantRegistrationFee}}
        data-test-prepaid-card-choice-merchant-fee
      />
    </CardPay::LabeledValue>
    <CardPay::LabeledValue @label="Pay Using Prepaid Card">
      {{#if this.selectedPrepaidCard}}
        <div class="prepaid-card-choice__change-card">
          <CardPay::CardPicker::CardOption
            @card={{this.selectedPrepaidCard}}
            data-test-prepaid-card-choice-selected-card
          />
          {{#if (eq this.creationState "default")}}
            <CardPay::CardPicker
              @options={{this.prepaidCardsForDropdown}}
              @chooseCard={{this.choosePrepaidCard}}
              @selectedCard={{this.selectedPrepaidCard}}
            />
          {{/if}}
        </div>
      {{else}}
        <CardPay::CardPicker
          @options={{this.prepaidCardsForDropdown}}
          @chooseCard={{this.choosePrepaidCard}}
          @selectedCard={{this.selectedPrepaidCard}}
        />
      {{/if}}
    </CardPay::LabeledValue>
    {{#if @isComplete}}
      <CardPay::LabeledValue @label="Business Address">
        <CardPay::Merchant
          @name={{@workflowSession.state.merchantName}}
          @address={{@workflowSession.state.merchantSafe.address}}
          @size="small"
          @logoBackground={{@workflowSession.state.merchantBgColor}}
          @logoTextColor={{@workflowSession.state.merchantTextColor}}
          data-test-prepaid-card-choice-merchant-address
        />
      </CardPay::LabeledValue>
    {{/if}}
    {{#if this.error}}
      <CardPay::ErrorMessage data-test-prepaid-card-choice-error-message as |supportURL|>
        {{#if (eq this.error.message "INSUFFICIENT_FUNDS")}}
          It looks like your prepaid card doesn't have enough funds to pay the {{format-amount this.merchantRegistrationFee 0}} SPEND ({{format-usd (spend-to-usd this.merchantRegistrationFee)}}) business account creation fee. Please try another prepaid card, or buy one in Card Wallet.
        {{else if (eq this.error.message "TIMEOUT")}}
          There was a problem creating your business account. Please contact <a href={{supportURL}} target="_blank" rel="noopener noreferrer">Cardstack support</a> to find out the status of your transaction.
        {{else if (eq this.error.message "USER_REJECTION")}}
          It looks like you have canceled the request in your wallet. Please try again if you want to continue with this workflow.
        {{else}}
          There was a problem creating your business account. This may be due to a network issue, or perhaps you canceled the request in your wallet. Please try again if you want to continue with this workflow, or contact <a href={{supportURL}} target="_blank" rel="noopener noreferrer">Cardstack support</a>.
        {{/if}}
      </CardPay::ErrorMessage>
    {{/if}}
  </ActionCardContainer::Section>
  <Boxel::ActionChin
    class="prepaid-card-choice__footer"
    @state={{this.creationState}}
    @disabled={{or @frozen (not this.selectedPrepaidCard)}}
  >
    <:default as |d|>
      <d.ActionButton
        {{on "click" this.createMerchant}}
        data-test-create-merchant-button
      >
        {{if this.hasTriedCreatingMerchant "Try Again" "Create Business Account"}}
      </d.ActionButton>
    </:default>
    <:in-progress as |i|>
      <i.ActionStatusArea @icon="card-wallet-app-icon" style={{css-var status-icon-size="2.5rem"}}>
        <Boxel::LoadingIndicator
          class="prepaid-card-choice__loading-indicator"
          @color="var(--boxel-light)"
        />
        <div class="prepaid-card-choice__in-progress-message">
          {{this.chinInProgressMessage}}
          {{#if this.enableCancelation}}
            <a href="#" class="prepaid-card-choice__cancel-button" data-test-create-merchant-cancel-button {{on 'click' (queue (prevent-default) this.cancel)}}>Cancel</a>
          {{/if}}
        </div>
      </i.ActionStatusArea>
      {{#if this.txViewerUrl}}
        <i.InfoArea>
          <Boxel::Button @as="anchor" @size="extra-small" @href={{this.txViewerUrl}} @kind="secondary-dark" target="_blank" rel="noopener">
            View on Blockscout
          </Boxel::Button>
        </i.InfoArea>
      {{/if}}
    </:in-progress>
    <:memorialized as |m|>
      <m.ActionStatusArea>
        Confirmed
      </m.ActionStatusArea>
      {{#if this.txViewerUrl}}
        <m.InfoArea>
          <Boxel::Button @as="anchor" @size="extra-small" @href={{this.txViewerUrl}} @kind="secondary-light" target="_blank" rel="noopener">
            View on Blockscout
          </Boxel::Button>
        </m.InfoArea>
      {{/if}}
    </:memorialized>
  </Boxel::ActionChin>
</ActionCardContainer>