<!--
  ~ Copyright (c) 2023 D2ArmorPicker by Mijago.
  ~
  ~ This program is free software: you can redistribute it and/or modify
  ~ it under the terms of the GNU Affero General Public License as published
  ~ by the Free Software Foundation, either version 3 of the License, or
  ~ (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful,
  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~ GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License
  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<form (submit)="submit()" [formGroup]="settingsNameForm">
  <table id="settings">
    <tr>
      <td>
        <mat-form-field appearance="outline">
          <mat-label>Name to save the configuration</mat-label>
          <input
            formControlName="name"
            matInput
            maxlength="30"
            minlength="4"
            placeholder="Awesome Discipline Build 4" />
        </mat-form-field>
      </td>
      <td>
        <button
          [disabled]="
            !this.settingsNameForm.get('name')?.value ||
            this.settingsNameForm.get('name')?.value.length < 4 ||
            this.settingsNameForm.get('name')?.value.length > 30
          "
          color="primary"
          mat-raised-button
          type="submit">
          Save current
        </button>
      </td>
      <td>
        <button
          (click)="clearEverything()"
          color="warn"
          mat-raised-button
          matTooltip="Clears the ENTIRE configuration and uses the default settings. Use with caution."
          >Clear everything
        </button>
      </td>
      <td>
        <button
          (click)="
            openSnackBar(
              'Copied the configuration to your clipboard. You can share it with your friends.'
            )
          "
          [cdkCopyToClipboard]="config.getCurrentConfigBase64Compressed()"
          color="primary"
          mat-raised-button
          matTooltip="Copy your current configuration into your clipboard. You will be able to share it with others and import it later.">
          Copy Current
        </button>
      </td>
    </tr>
    <tr style="display: none">
      <td>
        <mat-form-field appearance="outline">
          <mat-label>Load saved configuration</mat-label>
          <mat-select [(value)]="selectedEntry" [disabled]="storedConfigs.length === 0">
            <mat-option *ngFor="let element of storedConfigs" [value]="element.name">
              <span
                >(<span *ngIf="element.configuration.characterClass === 0">Titan</span>
                <span *ngIf="element.configuration.characterClass === 1">Hunter</span>
                <span *ngIf="element.configuration.characterClass === 2">Warlock</span>)
              </span>
              <span> {{ element.name }}</span>
            </mat-option>
          </mat-select>
        </mat-form-field>
      </td>
      <td>
        <button
          (click)="load(selectedEntry)"
          [disabled]="!selectedEntry || storedConfigs.length === 0"
          color="primary"
          mat-raised-button
          matTooltip="Load the currently selected configuration."
          >Load
        </button>
      </td>
      <td>
        <button
          (click)="delete(selectedEntry)"
          [disabled]="!selectedEntry || storedConfigs.length === 0"
          color="warn"
          mat-stroked-button
          matTooltip="Delete the currently selected configuration. Can not be undone."
          >Delete
        </button>
      </td>
    </tr>
  </table>
</form>
<br />

<table [dataSource]="storedConfigs" mat-table>
  <!-- Position Column -->
  <ng-container matColumnDef="name">
    <th *matHeaderCellDef mat-header-cell>Name</th>
    <td *matCellDef="let element" mat-cell>{{ element.name }} </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="class">
    <th *matHeaderCellDef mat-header-cell> Class </th>
    <td *matCellDef="let element" mat-cell>
      <span *ngIf="element.configuration.characterClass === 0">Titan</span>
      <span *ngIf="element.configuration.characterClass === 1">Hunter</span>
      <span *ngIf="element.configuration.characterClass === 2">Warlock</span>
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="mobility">
    <th *matHeaderCellDef mat-header-cell>
      <app-stat-icon [stat]="0"></app-stat-icon>
    </th>
    <td *matCellDef="let element" mat-cell>
      {{ element.configuration.minimumStatTiers[0].value * 10 }}
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="resilience">
    <th *matHeaderCellDef mat-header-cell>
      <app-stat-icon [stat]="1"></app-stat-icon>
    </th>
    <td *matCellDef="let element" mat-cell>
      {{ element.configuration.minimumStatTiers[1].value * 10 }}
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="recovery">
    <th *matHeaderCellDef mat-header-cell>
      <app-stat-icon [stat]="2"></app-stat-icon>
    </th>
    <td *matCellDef="let element" mat-cell>
      {{ element.configuration.minimumStatTiers[2].value * 10 }}
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="discipline">
    <th *matHeaderCellDef mat-header-cell>
      <app-stat-icon [stat]="3"></app-stat-icon>
    </th>
    <td *matCellDef="let element" mat-cell>
      {{ element.configuration.minimumStatTiers[3].value * 10 }}
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="intellect">
    <th *matHeaderCellDef mat-header-cell>
      <app-stat-icon [stat]="4"></app-stat-icon>
    </th>
    <td *matCellDef="let element" mat-cell>
      {{ element.configuration.minimumStatTiers[4].value * 10 }}
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="strength">
    <th *matHeaderCellDef mat-header-cell>
      <app-stat-icon [stat]="5"></app-stat-icon>
    </th>
    <td *matCellDef="let element" mat-cell>
      {{ element.configuration.minimumStatTiers[5].value * 10 }}
    </td>
  </ng-container>

  <!-- Position Column -->
  <ng-container matColumnDef="delete">
    <th *matHeaderCellDef mat-header-cell> </th>
    <td *matCellDef="let element" mat-cell>
      <button
        (click)="delete(element.name)"
        color="warn"
        mat-icon-button
        matTooltip="Delete this configuration permanently.">
        <mat-icon>delete_forever</mat-icon>
      </button>
      <button
        (click)="load(element.name)"
        color="primary"
        mat-icon-button
        matTooltip="Load this configuration. Your current settings will be overwritten.">
        <mat-icon>check_circle_outline</mat-icon>
      </button>
      <button
        (click)="copySingleSettingToClipboard(element)"
        color="primary"
        mat-icon-button
        matTooltip="Copy this configuration into your clipboard. You will be able to share it with others and import it later.">
        <mat-icon>get_app</mat-icon>
      </button>
    </td>
  </ng-container>

  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
</table>

<ng-container *ngIf="storedConfigs.length > 0">
  <br />
  <button
    color="primary"
    mat-raised-button
    (click)="copyAllSettingsToClipboard()"
    matTooltip="Export all configurations to the clipboard. You can then save and share them.">
    Copy all saved configurations to the clipboard
  </button>
</ng-container>

<!-- import -->
<br />
<div>
  <hr />
  <h2>Import a previously exported configuration</h2>
  <form [formGroup]="importTextForm">
    <table>
      <tr>
        <td>
          <mat-form-field appearance="outline">
            <mat-label>Copied configuration</mat-label>
            <input formControlName="content" matInput />
          </mat-form-field>
        </td>
        <td>
          <button
            (click)="runImport()"
            color="primary"
            mat-raised-button
            matTooltip="Import the given configuration">
            Start the import
          </button>
        </td>
      </tr>
    </table>
  </form>
</div>
