<dialog noouter="true" class="buy-dialog" #dialogRef>
  <dstore-close-button [dialog]="dialogRef"></dstore-close-button>
  <ng-container *ngIf="payment$ | async as order; else formRef" [ngSwitch]="order.status">
    <ng-container *ngSwitchCase="OrderStatus.OrderStatusWaiting">
      <ng-container [ngTemplateOutlet]="waitPayRef"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="OrderStatus.OrderStatusFailure">
      <ng-container [ngTemplateOutlet]="failedRef"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="OrderStatus.OrderStatusNetWorkError">
      <ng-container [ngTemplateOutlet]="netWorkErrorRef"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="OrderStatus.OrderStatusSuccess">
      <ng-container [ngTemplateOutlet]="successRef" [ngTemplateOutletContext]="{ order: order }"></ng-container>
    </ng-container>
  </ng-container>

  <!-- 1. form -->
  <ng-template #formRef>
    <form [formGroup]="form" (ngSubmit)="submit()">
      <div class="formField">
        <label i18n>Amount:</label>
        <div class="amount">
          {{soft.pricing.price/100 | currency:soft.pricing.currency:'symbol-narrow' }}
        </div>
      </div>
      <div>
        <label class="paymentLabel" i18n>Payment:</label>
        <br />
        <div class="payment-methods">
          <ng-container *ngFor="let item of paymentList">
            <label>
              <ng-container *ngIf="item.region===soft.pricing.currency">
                <input type="radio" name="third" formControlName="third" [value]="item.name" />
              </ng-container>

              <ng-container *ngIf="item.region!==soft.pricing.currency">
                <input type="radio" name="third" formControlName="third" disabled [value]="item.name" />
              </ng-container>
              <img class="paymentIcon {{item.name}}" />
            </label>
          </ng-container>


          <!-- <label>
            <input type="radio" name="method" formControlName="method" [value]="Payment.WeChat" />
            <img class="paymentIcon wechat" />
          </label> -->
        </div>
      </div>

      <button class="btn" [disabled]="form.invalid">
        <ng-container i18n>Pay Now</ng-container>
      </button>
    </form>
  </ng-template>

  <!-- 2. wait -->
  <ng-template #waitPayRef>
    <ng-container [ngSwitch]="payType">
      <div class="wait-pay">
        <ng-container *ngSwitchCase="Payment.WeChat">
          <div class="qrCodeBox">
            <div class="payField">
              <span i18n>Amount: </span>
              <span class="amount">{{soft.pricing.price/100 | currency:soft.pricing.currency:'symbol-narrow' }}</span>
            </div>
            <div class="qrcodeBorder">
              <div>
                <img src="" alt="" class="weChatSmLogo qrlogo">
                <img [src]="qrCode" alt="">
              </div>
              <span i18n>WeChat Pay</span>
            </div>

          </div>
        </ng-container>
        <ng-container *ngSwitchCase="Payment.AliPay">
          <img class="wait" [style.width.rem]="4" />
          <div i18n>Processing payment, please wait...</div>
        </ng-container>
      </div>
    </ng-container>
  </ng-template>

  <!-- 3. Failed -->
  <ng-template #failedRef>
    <div class="failed">
      <div>
        <div class="failed_tip">
          <i></i>
          <span i18n>Payment failed, please try again!</span>
        </div>
        <div class="failed_button">
          <button class="button_cancle" (click)="failedButton()" i18n>Cancel</button>
          <button class="button_again" (click)="submit()" i18n>Pay Again</button>
        </div>
      </div>
    </div>
  </ng-template>
  <!-- 4. netWork -->
  <ng-template #netWorkErrorRef>
    <div class="network">
      <div>
        <img src="/assets/icons/failed.svg" />
        <div class="timeoutTip">
          <ng-container i18n>Network disconnected, and you may not be able to buy the app successfully,</ng-container>
          <ng-container i18n> please check your network first</ng-container>

        </div>
      </div>


    </div>
  </ng-template>
  <!-- 5. Success -->
  <ng-template #successRef let-order="order">
    <div class="pay-success">
      <div class="success-title">
        <img class="icon" dstoreCover="icon" src="/assets/icons/ok.svg" /> <br />
        <div i18n>Payment Successful!</div>
      </div>
      <div class="order-info">
        <span i18n>Order No.</span>
        <span class="order-number">{{ order.order_number }}</span>
        <span i18n>Order Time</span>
        <span>{{ order.created_at | date: 'yyyy-MM-dd HH:mm:ss' }}</span>
        <span i18n>Payment Method</span>
        <span [ngSwitch]="order.pay_method">
          <ng-container *ngSwitchCase="Payment.AliPay" i18n>AliPay</ng-container>
          <ng-container *ngSwitchCase="Payment.WeChat" i18n>WeChat</ng-container>
          <ng-container *ngSwitchCase="Payment.PayPal" i18n>PayPal</ng-container>
        </span>
      </div>
    </div>
  </ng-template>
  <div [hidden]='true'>
    <img src="/assets/icons/failed.svg" />
  </div>
</dialog>