<form
  class="d-flex flex-column h-100"
  [formGroup]="activityForm"
  (keyup.enter)="activityForm.valid && onSubmit()"
  (ngSubmit)="onSubmit()"
>
  @if (mode === 'create') {
    <h1 i18n mat-dialog-title>Add activity</h1>
  } @else {
    <h1 i18n mat-dialog-title>Update activity</h1>
  }
  <div class="flex-grow-1 py-3" mat-dialog-content>
    <div class="mb-3">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Type</mat-label>
        <mat-select formControlName="type">
          <mat-select-trigger>{{
            typesTranslationMap[activityForm.get('type').value]
          }}</mat-select-trigger>
          <mat-option value="BUY">
            <span
              ><b>{{ typesTranslationMap['BUY'] }}</b></span
            >
            <small class="d-block line-height-1 text-muted text-nowrap" i18n
              >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
            >
          </mat-option>
          <mat-option value="FEE">
            <span
              ><b>{{ typesTranslationMap['FEE'] }}</b></span
            >
            <small class="d-block line-height-1 text-muted text-nowrap" i18n
              >One-time fee, annual account fees</small
            >
          </mat-option>
          <mat-option value="DIVIDEND">
            <span
              ><b>{{ typesTranslationMap['DIVIDEND'] }}</b></span
            >
            <small class="d-block line-height-1 text-muted text-nowrap" i18n
              >Distribution of corporate earnings</small
            >
          </mat-option>
          <mat-option value="INTEREST">
            <span
              ><b>{{ typesTranslationMap['INTEREST'] }}</b></span
            >
            <small class="d-block line-height-1 text-muted text-nowrap" i18n
              >Revenue for lending out money</small
            >
          </mat-option>
          <mat-option value="LIABILITY">
            <span
              ><b>{{ typesTranslationMap['LIABILITY'] }}</b></span
            >
            <small class="d-block line-height-1 text-muted text-nowrap" i18n
              >Mortgages, personal loans, credit cards</small
            >
          </mat-option>
          <mat-option value="SELL">
            <span
              ><b>{{ typesTranslationMap['SELL'] }}</b></span
            >
            <small class="d-block line-height-1 text-muted text-nowrap" i18n
              >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
            >
          </mat-option>
          <mat-option value="ITEM">
            <span
              ><b>{{ typesTranslationMap['ITEM'] }}</b></span
            >
            <small class="d-block line-height-1 text-muted text-nowrap" i18n
              >Luxury items, real estate, private companies</small
            >
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <div [ngClass]="{ 'mb-3': mode === 'update' }">
      <mat-form-field
        appearance="outline"
        class="w-100"
        [ngClass]="{ 'mb-1 without-hint': mode === 'create' }"
      >
        <mat-label i18n>Account</mat-label>
        <mat-select formControlName="accountId">
          @if (
            !activityForm.get('accountId').hasValidator(Validators.required) ||
            (!activityForm.get('accountId').value && mode === 'update')
          ) {
            <mat-option [value]="null" />
          }
          @for (account of data.accounts; track account) {
            <mat-option [value]="account.id">
              <div class="d-flex">
                @if (account.Platform?.url) {
                  <gf-asset-profile-icon
                    class="mr-1"
                    [tooltip]="account.Platform?.name"
                    [url]="account.Platform?.url"
                  />
                }
                <span>{{ account.name }}</span>
              </div>
            </mat-option>
          }
        </mat-select>
      </mat-form-field>
    </div>
    <div class="mb-3" [ngClass]="{ 'd-none': mode === 'update' }">
      <mat-checkbox color="primary" formControlName="updateAccountBalance" i18n
        >Update Cash Balance</mat-checkbox
      >
    </div>
    <div
      class="mb-3"
      [ngClass]="{
        'd-none': !activityForm
          .get('searchSymbol')
          .hasValidator(Validators.required)
      }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Name, symbol or ISIN</mat-label>
        <gf-symbol-autocomplete
          formControlName="searchSymbol"
          [isLoading]="isLoading"
        />
      </mat-form-field>
    </div>
    <div
      class="mb-3"
      [ngClass]="{
        'd-none': !activityForm.get('name').hasValidator(Validators.required)
      }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Name</mat-label>
        <input formControlName="name" matInput />
      </mat-form-field>
    </div>
    <div class="d-none">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Currency</mat-label>
        <mat-select formControlName="currency">
          @for (currency of currencies; track currency) {
            <mat-option [value]="currency">{{ currency }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
    </div>
    <div class="d-none">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Data Source</mat-label>
        <input formControlName="dataSource" matInput />
      </mat-form-field>
    </div>
    <div class="mb-3">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Date</mat-label>
        <input
          formControlName="date"
          matInput
          [matDatepicker]="date"
          [matDatepickerFilter]="dateFilter"
        />
        <mat-datepicker-toggle class="mr-2" matSuffix [for]="date">
          <ion-icon
            class="text-muted"
            matDatepickerToggleIcon
            name="calendar-clear-outline"
          />
        </mat-datepicker-toggle>
        <mat-datepicker #date disabled="false" />
      </mat-form-field>
    </div>
    <div
      class="mb-3"
      [ngClass]="{
        'd-none':
          activityForm.get('type')?.value === 'FEE' ||
          activityForm.get('type')?.value === 'INTEREST' ||
          activityForm.get('type')?.value === 'ITEM' ||
          activityForm.get('type')?.value === 'LIABILITY'
      }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Quantity</mat-label>
        <input formControlName="quantity" matInput type="number" />
      </mat-form-field>
    </div>
    <div
      class="mb-3"
      [ngClass]="{ 'd-none': activityForm.get('type')?.value === 'FEE' }"
    >
      <div class="align-items-start d-flex">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>
            @switch (activityForm.get('type')?.value) {
              @case ('DIVIDEND') {
                <ng-container i18n>Dividend</ng-container>
              }
              @case ('INTEREST') {
                <ng-container i18n>Value</ng-container>
              }
              @case ('ITEM') {
                <ng-container i18n>Value</ng-container>
              }
              @case ('LIABILITY') {
                <ng-container i18n>Value</ng-container>
              }
              @default {
                <ng-container i18n>Unit Price</ng-container>
              }
            }
          </mat-label>
          <input formControlName="unitPrice" matInput type="number" />
          <div
            class="ml-2"
            matTextSuffix
            [ngClass]="{ 'd-none': !activityForm.get('currency')?.value }"
          >
            <mat-select formControlName="currencyOfUnitPrice">
              @for (currency of currencies; track currency) {
                <mat-option [value]="currency">
                  {{ currency }}
                </mat-option>
              }
            </mat-select>
          </div>
        </mat-form-field>
        @if (
          currentMarketPrice &&
          (data.activity.type === 'BUY' || data.activity.type === 'SELL') &&
          isToday(activityForm.get('date')?.value)
        ) {
          <button
            class="ml-2 mt-1 no-min-width"
            mat-button
            title="Apply current market price"
            type="button"
            (click)="applyCurrentMarketPrice()"
          >
            <ion-icon class="text-muted" name="refresh-outline" />
          </button>
        }
      </div>
    </div>
    <div
      class="mb-3"
      [ngClass]="{
        'd-none':
          activityForm.get('type')?.value === 'INTEREST' ||
          activityForm.get('type')?.value === 'ITEM' ||
          activityForm.get('type')?.value === 'LIABILITY'
      }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Fee</mat-label>
        <input formControlName="fee" matInput type="number" />
        <div
          class="ml-2"
          matTextSuffix
          [ngClass]="{ 'd-none': !activityForm.get('currency')?.value }"
        >
          {{ activityForm.get('currencyOfUnitPrice').value }}
        </div>
      </mat-form-field>
    </div>
    <div class="mb-3">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Note</mat-label>
        <textarea
          cdkAutosizeMinRows="2"
          cdkTextareaAutosize
          formControlName="comment"
          matInput
          (keyup.enter)="$event.stopPropagation()"
        ></textarea>
      </mat-form-field>
    </div>
    <div
      class="mb-3"
      [ngClass]="{ 'd-none': activityForm.get('type')?.value !== 'ITEM' }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Asset Class</mat-label>
        <mat-select formControlName="assetClass">
          <mat-option [value]="null" />
          @for (assetClass of assetClasses; track assetClass) {
            <mat-option [value]="assetClass.id">{{
              assetClass.label
            }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
    </div>
    <div
      class="mb-3"
      [ngClass]="{ 'd-none': activityForm.get('type')?.value !== 'ITEM' }"
    >
      <mat-form-field appearance="outline" class="w-100">
        <mat-label i18n>Asset Sub Class</mat-label>
        <mat-select formControlName="assetSubClass">
          <mat-option [value]="null" />
          @for (assetSubClass of assetSubClasses; track assetSubClass) {
            <mat-option [value]="assetSubClass.id">{{
              assetSubClass.label
            }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
    </div>
    <div class="mb-3" [ngClass]="{ 'd-none': tagsAvailable?.length < 1 }">
      <gf-tags-selector
        [tags]="activityForm.get('tags')?.value"
        [tagsAvailable]="tagsAvailable"
        (tagsChanged)="onTagsChanged($event)"
      />
    </div>
  </div>
  <div class="d-flex" mat-dialog-actions>
    <gf-value
      class="flex-grow-1"
      [isCurrency]="true"
      [locale]="data.user?.settings?.locale"
      [unit]="
        activityForm.get('currencyOfUnitPrice')?.value ??
        data.user?.settings?.baseCurrency
      "
      [value]="total"
    />
    <div>
      <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>
      <button
        color="primary"
        mat-flat-button
        type="submit"
        [disabled]="!activityForm.valid"
      >
        <ng-container i18n>Save</ng-container>
      </button>
    </div>
  </div>
</form>
