<!--
  ~ 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/>.
  -->

<div id="container" fxLayout="row wrap" fxLayoutAlign="center" fxLayoutGap="5px">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Configuration</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <h2>Required Stats</h2>

      <div class="input-list">
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Mobility</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.desired.mobility" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Resilience</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.desired.resilience" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Recovery</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.desired.recovery" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Discipline</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.desired.discipline" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Intellect</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.desired.intellect" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Strength</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.desired.strength" />
          </mat-form-field>
        </div>
      </div>

      <mat-slide-toggle [(ngModel)]="options.stats.statsAreFixed"
        >Stats must be met exactly
      </mat-slide-toggle>
      <hr />
      <h2>Armor Selection</h2>
      <p
        >Use armor:
        <mat-button-toggle-group [(ngModel)]="options.armor.armorType">
          <mat-button-toggle [value]="3">Both</mat-button-toggle>
          <mat-button-toggle [value]="1">Own Armor</mat-button-toggle>
          <mat-button-toggle [value]="2">Generated Armor</mat-button-toggle>
        </mat-button-toggle-group>
      </p>

      <p>
        Class:
        <mat-button-toggle-group [(ngModel)]="options.fragments.class">
          <mat-button-toggle [value]="3">Any</mat-button-toggle>
          <mat-button-toggle [value]="0">Titan</mat-button-toggle>
          <mat-button-toggle [value]="1">Hunter</mat-button-toggle>
          <mat-button-toggle [value]="2">Warlock</mat-button-toggle>
        </mat-button-toggle-group>
      </p>

      <mat-slide-toggle [(ngModel)]="options.armor.requiresExotic"
        >Require an exotic armor piece
      </mat-slide-toggle>
      <br />
      <mat-slide-toggle [(ngModel)]="options.generator.generateExoticsWithIntrinsicStats"
        >Generate exotics with intrinsic stats
      </mat-slide-toggle>
      <br />

      <hr />
      <h2>Fragment selection</h2>
      <mat-slide-toggle [(ngModel)]="options.fragments.enableFragmentPicker" disabled
        >Enable fragment picking
      </mat-slide-toggle>
      <br />
      Subclass:
      <mat-button-toggle-group
        [disabled]="!options.fragments.enableFragmentPicker"
        [(ngModel)]="options.fragments.subclass">
        <mat-button-toggle [value]="-1">Any</mat-button-toggle>
        <mat-button-toggle [value]="ModifierType.Solar">Solar</mat-button-toggle>
        <mat-button-toggle [value]="ModifierType.Arc">Arc</mat-button-toggle>
        <mat-button-toggle [value]="ModifierType.Void">Void</mat-button-toggle>
        <mat-button-toggle [value]="ModifierType.Stasis">Stasis</mat-button-toggle>
        <mat-button-toggle [value]="ModifierType.Strand">Strand</mat-button-toggle>
      </mat-button-toggle-group>

      <hr />
      <br />

      <table id="slider-table">
        <tr>
          <td>Max Waste:</td>
          <td>
            <mat-slider
              min="0"
              max="54"
              step="1"
              tickInterval="auto"
              [(ngModel)]="options.stats.maxWaste"></mat-slider>
          </td>
          <td>{{ options.stats.maxWaste }} points</td>
        </tr>
        <tr>
          <td>Minimum Tiers:</td>
          <td>
            <mat-slider
              min="0"
              max="55"
              step="1"
              tickInterval="auto"
              [(ngModel)]="options.stats.minTiers"></mat-slider>
          </td>
          <td>{{ options.stats.minTiers }} tiers</td>
        </tr>
        <tr>
          <td>Max Mods:</td>
          <td>
            <mat-slider
              min="0"
              max="5"
              step="1"
              tickInterval="auto"
              [(ngModel)]="options.mods.maxMods"></mat-slider>
          </td>
          <td>{{ options.mods.maxMods }} mods</td>
        </tr>
        <tr>
          <td>Max Artifice Mods:</td>
          <td>
            <mat-slider
              min="0"
              max="5"
              step="1"
              tickInterval="auto"
              [(ngModel)]="options.mods.maxArtifice"></mat-slider>
          </td>
          <td>{{ options.mods.maxArtifice }} mods</td>
        </tr>
      </table>

      <h2>Constant Bonus to Stats</h2>
      (use this for theoretical +1 stuff)
      <div class="input-list">
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Mobility</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.constantBoost.mobility" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Resilience</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.constantBoost.resilience" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Recovery</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.constantBoost.recovery" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Discipline</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.constantBoost.discipline" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Intellect</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.constantBoost.intellect" />
          </mat-form-field>
        </div>
        <div class="input-list-entry">
          <mat-form-field class="example-full-width">
            <mat-label>Strength</mat-label>
            <input
              matInput
              type="number"
              min="-20"
              max="300"
              [(ngModel)]="options.stats.constantBoost.strength" />
          </mat-form-field>
        </div>
      </div>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-header>
      <mat-card-title>Solver Configuration</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <div>
        Timeout:
        <!-- timeout as a slider from 0.5s to 120s -->
        <mat-slider min="0.5" max="60" step="0.5" [(ngModel)]="options.solver.timeout"></mat-slider>
        <span>{{ options.solver.timeout }}s</span>
      </div>

      <mat-slide-toggle [(ngModel)]="options.solver.presolve"> Execute Presolver </mat-slide-toggle>
    </mat-card-content>

    <mat-card-actions>
      <button mat-raised-button color="primary" (click)="run()" [disabled]="!glpk || calculating"
        >Calculate</button
      >
      <br />
      <mat-progress-bar [value]="time_progress"></mat-progress-bar>
    </mat-card-actions>
  </mat-card>

  <mat-card>
    <mat-card-header>
      <mat-card-title>Results</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p
        [class.status-undefined]="result?.result?.status! === 1"
        [class.status-infeasable]="result?.result?.status! === 3 || result?.result?.status! === 4"
        [class.status-acceptable]="result?.result?.status! === 2"
        [class.status-optimal]="result?.result?.status! === 5"
        >Status Code {{ result?.result?.status! }}:
        {{ resultValueToText(result?.result?.status!) }}</p
      >
      <p>Time (s): {{ result?.time }}</p>

      <table id="result-table" *ngIf="result_items">
        <tr class="line-bottom">
          <td>Type</td>
          <td colspan="3">Item Definition</td>
          <td>Mobility</td>
          <td>Resilience</td>
          <td>Recovery</td>
          <td>Discipline</td>
          <td>Intellect</td>
          <td>Strength</td>
          <td>Sum</td>
        </tr>
        <ng-container *ngFor="let item of result_items['items']; let idx = index">
          <tr
            [class.exotic]="result_items['itemExotic'][idx]"
            [class.theoretic]="!result_items['itemMeta'][idx] && idx < 4"
            [class.real]="!result_items['itemMeta'][idx] && idx < 4"
            class="item-row">
            <td>{{ slotNameByIndex(idx) }}</td>
            <td *ngIf="idx < 4 && result_items['itemMeta'][idx]">{{
              result_items["itemMeta"][idx]["name"]
            }}</td>
            <td *ngIf="idx < 4 && !result_items['itemMeta'][idx]">THEORETICAL</td>
            <td *ngIf="idx === 4"></td>

            <td>
              <img
                class="icon-item"
                *ngIf="result_items['itemMeta'][idx]"
                [matTooltip]="result_items['itemMeta'][idx].icon"
                [src]="'https://bungie.net/' + result_items['itemMeta'][idx].icon" />
              <img
                class="icon-item"
                *ngIf="!result_items['itemMeta'][idx]"
                matTooltip="Generated"
                src="https://www.bungie.net/common/destiny2_content/icons/1d82cced47afdc699448c54b2a6fbf35.png" />
            </td>
            <td>
              <img
                class="icon-item"
                *ngIf="result_items['itemArtifice'][idx]"
                [matTooltip]="getPerkName(2)"
                [src]="getPerkIconUrl(2)" />
              <img
                class="icon-item"
                *ngIf="
                  !result_items['itemArtifice'][idx] &&
                  result_items['itemMeta'][idx] &&
                  result_items['itemMeta'][idx].perk !== 0
                "
                [matTooltip]="getPerkName(result_items['itemMeta'][idx].perk)"
                [src]="getPerkIconUrl(result_items['itemMeta'][idx].perk)" />
            </td>

            <td *ngFor="let stat of item">{{ stat }}</td>
            <td>{{ sum(item) }}</td>
          </tr>
          <tr *ngIf="result_items['itemIntrinsics'][idx]" class="intrinsic">
            <td>{{ slotNameByIndex(idx) }}</td>
            <td colspan="3">
              intrinsic on&nbsp;
              <img
                class="icon-item"
                [matTooltip]="item.name"
                [src]="'https://bungie.net/' + item.icon"
                *ngFor="let item of result_items['itemIntrinsics'][idx]['items']" />
            </td>
            <td>{{ result_items["itemIntrinsics"][idx]["entry"]["stats"][0] }}</td>
            <td>{{ result_items["itemIntrinsics"][idx]["entry"]["stats"][1] }}</td>
            <td>{{ result_items["itemIntrinsics"][idx]["entry"]["stats"][2] }}</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>{{ sum(result_items["itemIntrinsics"][idx]["entry"]["stats"]) }}</td>
          </tr>
        </ng-container>
        <!-- Masterwork -->
        <tr class="line-top row-masterwork">
          <td>Masterwork</td>
          <td colspan="3"></td>
          <td *ngFor="let stat of result_items['masterwork']">{{ stat }}</td>
          <td>{{ sum(result_items["masterwork"]) }}</td>
        </tr>
        <!-- constantBoost -->
        <tr *ngIf="sum(result_items['constants']) > 0">
          <td>Constant Boosts</td>
          <td colspan="3"></td>
          <td *ngFor="let stat of result_items['constants']">{{ stat }}</td>
          <td>{{ sum(result_items["constants"]) }}</td>
        </tr>
        <!-- Stat Mods -->
        <tr class="line-top">
          <td>Major Mods</td>
          <td colspan="3"></td>
          <td *ngFor="let stat of result_items['statMods']['major']">{{ 10 * stat }}</td>
          <td>{{ sum(result_items["statMods"]["major"]) * 10 }}</td>
        </tr>
        <tr>
          <td>Minor Mods</td>
          <td colspan="3"></td>
          <td *ngFor="let stat of result_items['statMods']['minor']">{{ 5 * stat }}</td>
          <td>{{ sum(result_items["statMods"]["minor"]) * 5 }}</td>
        </tr>
        <!-- ARTIFICE -->
        <tr>
          <td>Artifice Mods</td>
          <td colspan="3"></td>
          <td *ngFor="let stat of result_items['artificeMods']">{{ 3 * stat }}</td>
          <td>{{ sum(result_items["artificeMods"]) * 3 }}</td>
        </tr>
        <!-- TOTAL -->
        <tr class="line-top line-bottom">
          <td>Total</td>
          <td colspan="3"></td>
          <td *ngFor="let stat of result_items['total']">{{ stat }}</td>
          <td>{{ sum(result_items["total"]) }}</td>
        </tr>
        <!-- WASTE -->
        <tr>
          <td>Waste</td>
          <td colspan="3"></td>
          <td *ngFor="let stat of result_items['waste']">{{ stat }}</td>
          <td>{{ sum(result_items["waste"]) }}</td>
        </tr>
        <!-- TIERS -->
        <tr>
          <td>Tiers</td>
          <td colspan="3"></td>
          <td *ngFor="let stat of result_items['tiers']">{{ stat }}</td>
          <td>{{ sum(result_items["tiers"]) }}</td>
        </tr>
      </table>
    </mat-card-content>
  </mat-card>
</div>
<div>
  <mat-card>
    <mat-card-header>
      <mat-card-title>Results</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>{{ result_items | json }}</p>
      <p>{{ result?.result | json }}</p>
      <p>{{ lp | json }}</p>
    </mat-card-content>
  </mat-card>
</div>
