<ActionCardContainer
  @header="Prepaid card preview"
  @isComplete={{@isComplete}}
>
  <ActionCardContainer::Section
    @title="Prepaid card preview"
  >
    <div
      class={{cn "preview__content" preview__content--is-complete=@isComplete}}
      data-test-preview
    >
      {{#unless @isComplete}}
        <Boxel::Field
          @label="Card Preview"
          @fieldMode="view"
          class="preview__card-preview-field"
        >
          <div class="preview__card">
            <CardPay::PrepaidCard
              @issuerName={{@workflowSession.state.issuerName}}
              @headerBackground={{@workflowSession.state.colorScheme.background}}
              @headerPatternUrl={{@workflowSession.state.pattern.patternUrl}}
              @headerTextColor={{@workflowSession.state.colorScheme.textColor}}
              @headerPatternColor={{@workflowSession.state.colorScheme.patternColor}}
              @balance={{this.faceValue}}
              @usdBalance={{spend-to-usd this.faceValue}}
              @address={{placeholder-address}}
              @network={{network-display-info "layer2" "fullName"}}
              @mockOptions={{true}}
              {{did-insert this.checkForPendingTransaction}}
            />
          </div>
        </Boxel::Field>
      {{/unless}}
      <CardPay::FieldStack
        class={{cn "preview__data" preview__data--is-complete=@isComplete}}
        @horizontal={{@isComplete}}
      >
        <CardPay::LabeledValue
          @vertical={{true}}
          @label="Issued by"
          @value={{@workflowSession.state.issuerName}}
          data-test-prepaid-card-issuer-name-labeled-value
        />

        {{#if @isComplete}}
          <CardPay::LabeledValue
            @vertical={{true}}
            @label="Card address"
            data-test-prepaid-card-address-labeled-value
          >
            {{truncate-middle @workflowSession.state.prepaidCardAddress}}<br>
            on {{network-display-info "layer2" "fullName"}}
          </CardPay::LabeledValue>
        {{/if}}

        <CardPay::LabeledValue
          @vertical={{true}}
          @label="Face value"
          data-test-prepaid-card-face-value-labeled-value
        >
          <CardPay::BalanceDisplay
            class="preview__spend-face-value"
            @icon="spend"
            @sign="§"
            @symbol="SPEND"
            @balance={{format-amount this.faceValue}}
            @usdBalance={{spend-to-usd this.faceValue}}
          />
        </CardPay::LabeledValue>
      </CardPay::FieldStack>
    </div>
    {{#if this.error}}
      <CardPay::ErrorMessage data-test-issue-prepaid-card-error-message as |supportURL|>
        {{#if (eq this.error.message "INSUFFICIENT_FUNDS")}}
          {{!-- TODO: This should be accompanied by canceling the workflow --}}
          Looks like there’s no balance in your {{network-display-info "layer2" "fullName"}} wallet to fund your selected prepaid card. Before you can continue, please add funds to your {{network-display-info "layer2" "fullName"}} wallet by bridging some tokens from your {{network-display-info "layer1" "fullName"}} wallet.
          {{!-- TODO: "The balance required to create your desired prepaid card is ${}" --}}
        {{else if (eq this.error.message "TIMEOUT")}}
          There was a problem creating your prepaid card. 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 prepaid card. 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
    @state={{this.issueState}}
    @disabled={{@frozen}}
  >
    <:default as |d|>
      <d.ActionButton
        {{on "click" this.issuePrepaidCard}}
        data-test-issue-prepaid-card-button
      >
        {{if this.hasTriedCreatingPrepaidCard "Try Again" "Create"}}
      </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="preview__loading-indicator"
          @color="var(--boxel-light)"
        />
        <div class="preview__in-progress-message">
          {{this.chinInProgressMessage}}
          {{#if this.enableCancelation}}
            <a href="#" class="preview__cancel-button" data-test-issue-prepaid-card-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>