<ActionCardContainer
  @suppressHeader={{@suppressHeader}}
  @header={{concat "Wallet - " (network-display-info "layer2" "fullName")}}
  @isComplete={{@isComplete}}
  data-test-layer-2-wallet-card
  {{did-insert this.layer2Network.refreshSafesAndBalances}}
  ...attributes
>
  {{#if (eq this.cardState 'memorialized')}}
    <Listener
      @emitter={{this.layer2Network}}
      @event="disconnect"
      @action={{this.onDisconnect}}
    />
    <ActionCardContainer::Section
      @title="Card Wallet"
      @imgUrl={{this.cardstackLogo}}
      class="layer-two-connect-card__body"
      data-test-layer-2-wallet-summary
    >
      <CardPay::FieldStack>
        <CardPay::LabeledValue
          @label="Network"
          @value={{network-display-info "layer2" "fullName"}}
        />

        {{#if this.isConnected}}
          <CardPay::LabeledValue
            @label="Account"
            @value={{this.layer2Network.walletInfo.firstAddress}}
            @isAddress={{true}}
            data-test-address-field
          />
          <CardPay::LabeledValue @label="Depot balance" data-test-balance-container>
            {{#if this.layer2Network.isFetchingDepot}}
              <Boxel::LoadingIndicator data-test-balance-container-loading/>
            {{else if this.balancesToShow.length}}
            <CardPay::BalancesList as |Balance|>
              {{#each this.balancesToShow as |b|}}
                <Balance @symbol={{b.symbol}} @amount={{b.amount}} />
              {{/each}}
            </CardPay::BalancesList>
            {{else}}
              None
            {{/if}}
          </CardPay::LabeledValue>
        {{/if}}

        {{!-- future: show Prepaid Cards, Badges --}}
        <CardPay::LabeledValue
          @label="Status"
          @value={{if this.isConnected "Connected" "Disconnected"}}
          @icon={{if this.isConnected "success-bordered" "failure-bordered"}}
          data-test-layer-2-wallet-connected-status
        />
      </CardPay::FieldStack>
    </ActionCardContainer::Section>

    {{#if this.isConnected}}
      <Boxel::ActionChin @state='memorialized' @disabled={{@frozen}}>
        <:memorialized as |m|>
          <m.ActionButton {{on "click" this.disconnect}} data-test-layer-2-wallet-disconnect-button>
            Disconnect Wallet
          </m.ActionButton>
        </:memorialized>
      </Boxel::ActionChin>
    {{/if}}
  {{else}}
    <ActionCardContainer::Section>
      <ActionCardContainer::Section
        @title="Install the Card Wallet app on your mobile phone"
        class="layer-two-connect-card__section layer-two-connect-card__section--one"
        data-test-layer-2-connect-prompt
      >
        {{#if @includeExplanations}}
          <p class="layer-two-connect-card__explanation">
            Please install the Card Wallet app on your mobile phone and create/add an account.
          </p>
        {{/if}}
        <div class="layer-two-connect-card__link-container">
          <img
            srcset="{{this.cardstackMobileAppPhone}},
                    {{this.cardstackMobileAppPhone2x}} 2x"
            src={{this.cardstackMobileAppPhone}}
            alt="Card Wallet mobile app on a smartphone"
            width="138px"
            height="149px"
          >
          <a
            class="layer-two-connect-card__testflight-link"
            href={{this.testFlightLink}}
            target="_blank"
            rel="noopener noreferrer"
          >
            {{svg-jar "test-flight-icon" width="210px" }}

            <div>
              Download TestFlight
              {{svg-jar "caret-right-large" class="layer-two-connect-card__testflight-link-icon"}}
            </div>
          </a>
        </div>
      </ActionCardContainer::Section>
      <ActionCardContainer::Section
        @title="Scan this QR code with your Card Wallet app"
        class="layer-two-connect-card__section layer-two-connect-card__section--two"
      >
        {{#if @includeExplanations}}
          <p class="layer-two-connect-card__explanation">
              Scan this QR code with your account in the mobile app to connect it with Card Pay.
          </p>
        {{/if}}
        {{#if this.layer2Network.walletConnectUri}}
          <div data-test-wallet-connect-qr-code class="layer-two-connect-card__qr-container">
            <StyledQrCode
              @data={{this.layer2Network.walletConnectUri}}
              @image={{this.cardstackLogoForQR}}
              @size={{340}}
              @margin={{15}}
              @backgroundColor="#ffffff"
              @dotType="dots"
              @dotColor="#000"
              @cornerDotType="dot"
              @cornerSquareType="extra-rounded"
              @imageMargin={{5}}
            />
          </div>
        {{else}}
          <div class="layer-two-connect-card__loading-qr" data-test-wallet-connect-loading-qr-code>
            <span>
              Loading QR Code for Card Wallet connection...
            </span>
          </div>
        {{/if}}
      </ActionCardContainer::Section>
    </ActionCardContainer::Section>
    <button class="layer-two-connect-card__alternate-wallet" type="button">
      <span>
        Use a different wallet with {{network-display-info "layer2" "fullName"}} support
      </span>
      {{svg-jar "caret-thin-right" class="layer-two-connect-card__alternate-wallet-caret"}}
    </button>
  {{/if}}
</ActionCardContainer>
