<form [formGroup]="refundForm" class="fl-content fl-content-min-height">
  <h2 class="fl-heading-md fl-margin-bottom-small" i18n>Refund invoice payment</h2>
  <p *ngIf="transactions && !transactions.length" i18n>No refundable transactions found</p>
  <app-form-errors #formErrors [formGroup]="refundForm"></app-form-errors>
  <div layoutDirection="column" *ngIf="transactions && transactions.length">
    <mat-form-field>
      <mat-label i18n>Select transaction to refund</mat-label>
      <mat-select formControlName="transactionIndex" placeholder="Select transaction to refund" i18n-placeholder>
        <mat-option *ngFor="let transaction of transactions; let i = index" [value]="i">
          {{transaction.gateway.display_name}} {{transaction.external_id }}
            ({{transaction.amount | currencyFormatter: transaction.currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}})
        </mat-option>
      </mat-select>
      <mat-error>{{backendErrors['transaction'] | fieldRequired }}</mat-error>
    </mat-form-field>
    <mat-form-field *ngIf="refundDetails">
      <mat-label i18n>Select refund method</mat-label>
      <mat-select formControlName="refundMethod" placeholder="Select refund method" i18n-placeholder
                  (selectionChange)="updateRefundDetails()" required>
        <mat-option [value]="refundMethods.refundThroughGateway" *ngIf="refundDetails.action" i18n>
          Refund through gateway
        </mat-option>
        <mat-option [value]="refundMethods.refundManually" i18n>
          Manual refund processed externally
        </mat-option>
        <mat-option *ngIf="refundDetails.canRefundToCredit" [value]="refundMethods.refundToCredit" i18n>
          Add to client's credit balance
        </mat-option>
      </mat-select>
      <mat-error i18n>This field is required!</mat-error>
    </mat-form-field>
    <mat-form-field *ngIf="this.refundForm.controls.refundMethod.value === refundMethods.refundManually">
      <mat-label i18n>External transaction id</mat-label>
      <input matInput placeholder="External transaction id" i18n-placeholder type="text"
             formControlName="externalTransactionId">
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>Refund amount ({{object.currency}})</mat-label>
      <input matInput type="number" formControlName="refundAmount"
             placeholder="Refund amount ({{object.currency}})" i18n-placeholder>
      <mat-error>{{fieldErrors['refundAmount']}}</mat-error>
    </mat-form-field>

    <div *ngIf="refundDetails && refundForm.controls.refundAmount.valid">
      <div *ngIf="transaction">
        <h4 i18n>
          You choose to refund transaction {{refundDetails.transactionInfo}}, amount
          {{refundForm.controls.refundAmount.value}}.
          <br>
          When you refund this transaction the following will happen:
        </h4>
      </div>
      <div>
        <ul>
          <li *ngFor="let journalEntry of refundDetails.journalEntries" i18n>
              {{refundForm.controls.refundAmount.value | currencyFormatter: journalEntry.destination_currency: authSvc.currencyDisplayMode: authSvc.currencyDigitsInfo: config.locale}} will be deducted from
              {{journalEntry.destination_name}}
            <span *ngIf="this.refundForm.controls.refundMethod.value === refundMethods.refundToCredit">
              and added to client credit
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div layoutDirection="row" layoutAlign="end">
      <button (click)="refund()" mat-button color="primary" i18n>Refund</button>
    </div>
  </div>
</form>
