<ActionCardContainer
  class="merchant-customization"
  @header="Business Account"
  @isComplete={{@isComplete}}
  data-test-merchant-customization-is-complete={{@isComplete}}
>
  <ActionCardContainer::Section @title="Choose a name and ID for the business">
    <CardPay::LabeledValue
      class="merchant-customization__name"
      @label={{if @isComplete "Business Name" "Preview"}}
      data-test-merchant-customization-merchant-preview
    >
      <CardPay::Merchant
        class={{unless this.trimmedMerchantName "merchant-customization__enter-name"}}
        @name={{or this.trimmedMerchantName "Enter business name"}}
        @logoBackground={{this.merchantBgColor}}
        @logoTextColor={{this.merchantTextColor}}
        @size="large"
        @vertical={{true}}
      />
    </CardPay::LabeledValue>
    {{#if @isComplete}}
      <CardPay::LabeledValue @label="Business ID" data-test-merchant-customization-merchant-id-field>
        {{this.merchantId}}
      </CardPay::LabeledValue>
      <CardPay::LabeledValue @label="Custom Color" data-test-merchant-customization-color-field>
        <div class="merchant-customization__color">
          <div class="merchant-customization__color-preview" style={{css-var merchant-custom-color=(or this.merchantBgColor "var(--boxel-blue)")}} />
          {{or this.merchantBgColor "#0069F9"}}
        </div>
      </CardPay::LabeledValue>
      <CardPay::LabeledValue @label="Manager">
        <CardPay::AccountDisplay
          @wrapped={{true}}
          @address={{this.layer2Network.walletInfo.firstAddress}}
          data-test-merchant-customization-manager-address
        />
      </CardPay::LabeledValue>
    {{else}}
      <CardPay::FieldStack>
        <CardPay::LabeledValue
          @fieldMode="edit"
          @label="Business name"
          data-test-merchant-customization-merchant-name-field
        >
          <Boxel::Input
            @value={{this.merchantName}}
            @onInput={{this.onMerchantNameInput}}
            @invalid={{this.merchantNameValidationMessage}}
            @errorMessage={{this.merchantNameValidationMessage}}
            @required={{true}}
            autocomplete="off"
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false"
            {{on "blur" this.validateMerchantName}}
          />
        </CardPay::LabeledValue>
        <CardPay::LabeledValue
          @fieldMode="edit"
          @label="Business ID"
          data-test-merchant-customization-merchant-id-field
        >
          <Common::ValidationStateInput
            @state={{this.merchantIdInputState}}
            @value={{this.merchantId}}
            @onInput={{this.onMerchantIdInput}}
            @errorMessage={{this.merchantIdValidationMessage}}
            @helperText="This is a unique ID that will be used to identify your business in the Cardstack network. Please note that this ID cannot be changed once the business has been created."
            autocomplete="off"
            autocorrect="off"
            autocapitalize="off"
            spellcheck="false"
            {{on "blur" this.validateMerchantId}}
          />
        </CardPay::LabeledValue>
        <CardPay::LabeledValue
          @fieldMode="edit"
          @label="Custom color"
          data-test-merchant-customization-color-field
        >
          {{!-- template-lint-disable require-input-label --}}
          <div class="merchant-customization__color">
            <input
              type="color"
              value={{this.merchantBgColor}}
              class="merchant-customization__color-input"
              {{on "input" this.onMerchantBgColorInput}}
            >
            {{this.merchantBgColor}}
          </div>
        </CardPay::LabeledValue>
        <CardPay::LabeledValue @label="Manager">
          <CardPay::AccountDisplay
            @wrapped={{true}}
            @address={{this.layer2Network.walletInfo.firstAddress}}
            data-test-merchant-customization-manager-address
          />
        </CardPay::LabeledValue>
      </CardPay::FieldStack>
    {{/if}}
  </ActionCardContainer::Section>
  <Boxel::ActionChin
    @state={{if @isComplete "memorialized" "default"}}
    @disabled={{or (not this.canSaveDetails) @frozen}}
  >
    <:default as |d|>
      <d.ActionButton
        data-test-merchant-customization-save-details
        {{on "click" this.saveDetails}}
      >
        Save Details
      </d.ActionButton>
    </:default>
    <:memorialized as |m|>
      <m.ActionButton
      data-test-merchant-customization-edit
        {{on "click" @onIncomplete}}
      >
        Edit
      </m.ActionButton>
    </:memorialized>
  </Boxel::ActionChin>
</ActionCardContainer>
