<!--
  ~ 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="cluster-container">
  <a
    class="returnbutton"
    color="primary"
    fxShow="false"
    fxShow.lt-md="true"
    mat-raised-button
    routerLink="/">
    Return to D2ArmorPicker
  </a>
  <mat-card>
    <mat-card-title> About this page </mat-card-title>
    <mat-card-content>
      This page <i>can</i> help you to sort out your vault a bit. It takes all your armor entries
      and tries to sort them into {{ clusterInformation.length }} clusters. It then gives you a DIM
      search query for each cluster. You can use this to look at similar rolls in your vault and to
      clean out some of them.
      <br />
      <br />
      Please note that it will cluster all armor for all characters. Make sure to use "is:titan",
      "is:warlock" or "is:hunter" in DIM.
      <br />
      <br />
      Please also note that this feature is new and may have some inaccuracy for some items.
    </mat-card-content>

    <mat-card-title> How do I use this page? </mat-card-title>
    <mat-card-content>
      <ol>
        <li>Pick one of the clusters below.</li>
        <li>Copy the DIM search query and insert it in the search bar in DIM.</li>
        <li>
          If you want, add one of the following to the search query: "is:titan", "is:warlock",
          "is:hunter" (without " of course);<br />
          You can also use "not:masterwork", "not:exotic" or other filters.
        </li>
        <li
          >Look at all the armor. Just look at it. If you see duplicates, you can look at them and
          decide which ones to keep.
        </li>
      </ol>
    </mat-card-content>
  </mat-card>

  <mat-card>
    <mat-card-title>Options</mat-card-title>
    <mat-card-subtitle> Additional options for the clustering results. </mat-card-subtitle>
    <mat-card-content>
      <div class="settings-container">
        <span><b>Exotics</b><br />Decide whether you want to see or hide exotics.</span>
        <span>
          <mat-button-toggle-group (valueChange)="Update()" [(value)]="exoticFilter">
            <mat-button-toggle
              class="red"
              matTooltip="Only select non-exotic armor pieces."
              value="-1"
              ><mat-icon>visibility_off</mat-icon></mat-button-toggle
            >
            <mat-button-toggle
              class="green"
              matTooltip="Only select exotic  armor pieces."
              value="1"
              ><mat-icon>visibility</mat-icon></mat-button-toggle
            >
            <mat-button-toggle checked value="0">All</mat-button-toggle>
          </mat-button-toggle-group>
        </span>
      </div>
      <div class="settings-container">
        <span
          ><b>Masterwork</b><br />Decide whether you want to see or hide masterworked armor.</span
        >
        <span>
          <mat-button-toggle-group (valueChange)="Update()" [(value)]="masterworkFilter">
            <mat-button-toggle
              class="red"
              matTooltip="Only select non-masterworked armor pieces."
              value="-1"
              ><mat-icon>visibility_off</mat-icon></mat-button-toggle
            >
            <mat-button-toggle
              class="green"
              matTooltip="Only select masterworked armor pieces."
              value="1"
              ><mat-icon>visibility</mat-icon></mat-button-toggle
            >
            <mat-button-toggle checked value="0">All</mat-button-toggle>
          </mat-button-toggle-group>
        </span>
      </div>
      <div class="settings-container">
        <span><b>Class</b><br />Decide which class you want to see.</span>
        <span>
          <mat-button-toggle-group (valueChange)="Update()" [(value)]="classFilter">
            <mat-button-toggle matTooltip="Titan" value="0">
              <svg
                aria-hidden="true"
                class="svgClassIcon"
                focusable="false"
                viewBox="0 0 32 32"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="m14.839 15.979-13.178-7.609v15.218zm2.322 0 13.178 7.609v-15.218zm5.485-12.175-6.589-3.804-13.178 7.609 13.178 7.609 13.179-7.609zm0 16.784-6.589-3.805-13.178 7.609 13.178 7.608 13.179-7.608-6.59-3.805z"
                  fill="currentColor"></path>
              </svg>
            </mat-button-toggle>
            <mat-button-toggle matTooltip="Hunter" value="1">
              <svg
                aria-hidden="true"
                class="svgClassIcon"
                focusable="false"
                viewBox="0 0 32 32"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="m9.055 10.446 6.945-.023-6.948 10.451 6.948-.024-7.412 11.15h-7.045l7.036-10.428h-7.036l7.032-10.422h-7.032l7.507-11.126 6.95-.024zm13.89 0-6.945-10.446 6.95.024 7.507 11.126h-7.032l7.032 10.422h-7.036l7.036 10.428h-7.045l-7.412-11.15 6.948.024-6.948-10.451z"
                  fill="currentColor"></path>
              </svg>
            </mat-button-toggle>
            <mat-button-toggle matTooltip="Warlock" value="2">
              <svg
                aria-hidden="true"
                class="svgClassIcon"
                focusable="false"
                viewBox="0 0 32 32"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="m5.442 23.986 7.255-11.65-2.71-4.322-9.987 15.972zm5.986 0 4.28-6.849-2.717-4.333-6.992 11.182zm7.83-11.611 7.316 11.611h5.426l-10.015-15.972zm-7.26 11.611h8.004l-4.008-6.392zm6.991-11.182-2.703 4.324 4.302 6.858h5.413zm-5.707-.459 2.71-4.331 2.71 4.331-2.703 4.326z"
                  fill="currentColor"></path>
              </svg>
            </mat-button-toggle>

            <mat-button-toggle checked value="-1">All</mat-button-toggle>
          </mat-button-toggle-group>
        </span>
      </div>
    </mat-card-content>
  </mat-card>

  <div
    class="cluster-container"
    fxFlexFill="1"
    fxLayout="row"
    fxLayout.xs="column"
    fxLayoutGap="5px">
    <ng-container *ngFor="let cluster of clusters; let idx = index">
      <mat-card *ngIf="cluster.length > 0" class="cluster-item">
        <mat-card-title> Cluster {{ idx + 1 }} </mat-card-title>
        <mat-card-subtitle>
          Contains {{ cluster.length }} item{{ cluster.length > 1 ? "s" : "" }}
        </mat-card-subtitle>
        <mat-card-content>
          <div>
            <table width="100%">
              <ng-container *ngFor="let entry of clusterInformation[idx].mean; let idx1 = index">
                <tr
                  *ngIf="idx1 > 0"
                  [matTooltip]="
                    [
                      '',
                      'Mobility',
                      'Resilience',
                      'Recovery',
                      'Discipline',
                      'Intellect',
                      'Strength'
                    ][idx1]
                  ">
                  <td>
                    {{
                      [
                        "",
                        "Mobility",
                        "Resilience",
                        "Recovery",
                        "Discipline",
                        "Intellect",
                        "Strength"
                      ][idx1]
                    }}
                  </td>
                  <td width="100%">
                    <div class="stat-range">
                      <div
                        class="stat-range-bar"
                        style="width:{{ (clusterInformation[idx].mean[idx1] / 32) * 100 }}%"></div>
                      <span class="avg-stat-value">
                        {{ clusterInformation[idx].mean[idx1] | number : "1.0-0" }}
                      </span>
                    </div>
                  </td>
                </tr>
              </ng-container>
            </table>
          </div>
          <mat-form-field appearance="fill" class="searchQueryField">
            <mat-label>DIM Search Query</mat-label>
            <input [value]="getDIMStringForCluster(cluster)" matInput readonly type="text" />
          </mat-form-field>
          <button
            (click)="openSnackBar('Copied the DIM search query to your clipboard.')"
            [cdkCopyToClipboard]="getDIMStringForCluster(cluster)"
            class="copyButton"
            color="primary"
            mat-raised-button
            matTooltip="Use this button to copy a DIM search query to your clip board. It allows you to search the given items in DIM.">
            Copy DIM query to clipboard
          </button>
        </mat-card-content>
      </mat-card>
    </ng-container>
  </div>

  <a
    class="returnbutton"
    color="primary"
    mat-raised-button
    routerLink="/"
    fxShow="false"
    fxShow.lt-md="true">
    Return to D2ArmorPicker
  </a>
</div>
