<!--
  ~ Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<bci-page-content>
  <h2 class="page-heading">Alert & Warning</h2>
  <h3>Basic Demo</h3>

  <div style="padding-bottom: 16px">
    <mat-form-field>
      <mat-label>Templates</mat-label>
      <mat-select
        name="selectTemplate"
        placeholder="Templates"
        [(ngModel)]="selectedOptionValue"
        [required]="true"
        (selectionChange)="changeForm(selectedOptionValue)"
      >
        <mat-option *ngFor="let templateOption of templateOptions" [value]="templateOption.value">
          {{ templateOption.label }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <form (ngSubmit)="f.form.valid && openAlertModal()" #f="ngForm">
    <div>
      <div class="div-container">
        <h5>Header:</h5>
        <mat-form-field>
          <mat-label>Title</mat-label>
          <input
            matInput
            type="text"
            name="title"
            [(ngModel)]="title"
            (ngModelChange)="changeToCustomOption()"
            placeholder="Do you want to save changes on 'Item 3'?"
          />
        </mat-form-field>
        <mat-form-field *ngIf="selectedAlertType === alertType.None">
          <mat-label>Additional Title</mat-label>
          <input
            matInput
            type="text"
            name="additionalTitle"
            [(ngModel)]="additionalTitle"
            (ngModelChange)="changeToCustomOption()"
            placeholder="If you want to have second header, enter a title"
          />
        </mat-form-field>
      </div>

      <div class="div-container">
        <h5>Content:</h5>
        <mat-form-field>
          <mat-label>Description</mat-label>
          <input
            matInput
            type="text"
            name="description"
            [(ngModel)]="description"
            (ngModelChange)="changeToCustomOption()"
            placeholder="If you don't save, your changes will be lost."
          />
        </mat-form-field>
        <mat-form-field>
          <mat-label>Info Text</mat-label>
          <input
            matInput
            type="text"
            name="infoText"
            [(ngModel)]="infoText"
            (ngModelChange)="changeToCustomOption()"
            placeholder="Optional Info Text"
          />
        </mat-form-field>
      </div>

      <div class="div-container">
        <h5>Button:</h5>
        <mat-form-field>
          <mat-label>Left Button Title</mat-label>
          <input
            matInput
            type="text"
            name="leftBtnTitle"
            [(ngModel)]="leftBtnTitle"
            (ngModelChange)="changeToCustomOption()"
            required
            placeholder="Save"
          />
        </mat-form-field>

        <mat-form-field>
          <mat-label>Right Button Title</mat-label>
          <input
            matInput
            type="text"
            name="rightBtnTitle"
            [(ngModel)]="rightBtnTitle"
            (ngModelChange)="changeToCustomOption()"
            placeholder="Cancel"
          />
        </mat-form-field>

        <mat-form-field>
          <mat-label>Outer Left Button Title</mat-label>
          <input
            matInput
            type="text"
            name="outerLeftBtnTitle"
            [(ngModel)]="outerLeftBtnTitle"
            (ngModelChange)="changeToCustomOption()"
            placeholder="Save as draft"
          />
        </mat-form-field>
      </div>

      <div class="div-container">
        <h5>Selection:</h5>
        <mat-form-field>
          <mat-label>Alert Type</mat-label>
          <mat-select
            placeholder="Alert Type"
            name="selectedAlertType"
            value="alertType.None"
            [(ngModel)]="selectedAlertType"
            (ngModelChange)="changeToCustomOption()"
          >
            <mat-option [value]="alertType.None">None</mat-option>
            <mat-option [value]="alertType.Info">Info</mat-option>
            <mat-option [value]="alertType.Success">Success</mat-option>
            <mat-option [value]="alertType.Warning">Warning</mat-option>
            <mat-option [value]="alertType.Error">Error</mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field>
          <mat-label>Primary Button</mat-label>
          <mat-select
            placeholder="Primary Button"
            name="selectedPrimaryButton"
            [(ngModel)]="selectedPrimaryButton"
            (ngModelChange)="changeToCustomOption()"
          >
            <mat-option [value]="primaryButton.LeftButton">Left Button</mat-option>
            <mat-option [value]="primaryButton.RightButton">Right Button</mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <bci-commandbar [showSearch]="false" [showAdd]="false">
        <bci-commandbar-quickfilters>
          <bci-commandbar-item>
            <mat-slide-toggle
              name="disableOuterLeftBtn"
              [(ngModel)]="disableOuterLeftBtn"
              (ngModelChange)="changeToCustomOption()"
              >Disable Outer Left Button
            </mat-slide-toggle>
          </bci-commandbar-item>
          <bci-commandbar-item>
            <mat-slide-toggle
              name="disableLeftBtn"
              data-test="alert-dialog-disable-left-button"
              [(ngModel)]="disableLeftBtn"
              (ngModelChange)="changeToCustomOption()"
              >Disable Left Button
            </mat-slide-toggle>
          </bci-commandbar-item>
          <bci-commandbar-item>
            <mat-slide-toggle
              name="disableRightBtn"
              data-test="alert-dialog-disable-right-button"
              [(ngModel)]="disableRightBtn"
              (ngModelChange)="changeToCustomOption()"
              >Disable Right Button
            </mat-slide-toggle>
          </bci-commandbar-item>
        </bci-commandbar-quickfilters>
      </bci-commandbar>

      <div style="display: flex; column-gap: 32px; flex-wrap: wrap; margin-top: 16px">
        <button bciPrimaryButton type="submit" data-test="alert-dialog-show-button">Show Alert Modal</button>
        <button type="reset" bciSecondaryButton data-test="alert-dialog-reset-button">Reset</button>
      </div>

      <p *ngIf="modalResponse" data-test="alert-dialog-modal-result">Modal Result: {{ modalResponse }}</p>
    </div>
  </form>
  <br />
  <bci-callout type="info" class="page-callout">
    <strong>Additonal title</strong>
    <p>
      The additional title depends now on the alert type. For info, success, warning and error the additional title is
      always shown and has the content of the alert type. You can only <strong>customize</strong> the additional title
      if you use the alert type None.
    </p>
  </bci-callout>

  <h3>Dialog sizes</h3>
  <p>
    These two tables show the minimum/maximum width/height for dialogs. A differentiation is made between the dialog
    with and without additional title.
  </p>
  <p>VP1 = Viewport 1, VP2 = Viewport2, VP3 = Viewport 3</p>
  <div class="table-container">
    <div class="table">
      <strong>Without additional Title</strong>
      <table mat-table [dataSource]="dataSource1" class="mat-elevation-z8">
        <!-- Viewpor#t Column -->
        <ng-container matColumnDef="viewport">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Viewport</th>
          <td mat-cell *matCellDef="let element">{{ element.viewport }}</td>
        </ng-container>

        <!-- Min-Width Column -->
        <ng-container matColumnDef="minWidth">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Min-Width</th>
          <td mat-cell *matCellDef="let element">{{ element.minWidth }}</td>
        </ng-container>

        <!-- Max-Width Column -->
        <ng-container matColumnDef="maxWidth">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Max-Width</th>
          <td mat-cell *matCellDef="let element">{{ element.maxWidth }}</td>
        </ng-container>

        <!-- Min-Height Column -->
        <ng-container matColumnDef="minHeight">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Min-Height</th>
          <td mat-cell *matCellDef="let element">{{ element.minHeight }}</td>
        </ng-container>

        <!-- Max-Height Column -->
        <ng-container matColumnDef="maxHeight">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Max-Height</th>
          <td mat-cell *matCellDef="let element">{{ element.maxHeight }}</td>
        </ng-container>

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

    <div class="table">
      <strong>With additional Title</strong>
      <table mat-table [dataSource]="dataSource2" class="mat-elevation-z8">
        <!-- Viewport Column -->
        <ng-container matColumnDef="viewport">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Viewport</th>
          <td mat-cell *matCellDef="let element">{{ element.viewport }}</td>
        </ng-container>

        <!-- Min-Width Column -->
        <ng-container matColumnDef="minWidth">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Min-Width</th>
          <td mat-cell *matCellDef="let element">{{ element.minWidth }}</td>
        </ng-container>

        <!-- Max-Width Column -->
        <ng-container matColumnDef="maxWidth">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Max-Width</th>
          <td mat-cell *matCellDef="let element">{{ element.maxWidth }}</td>
        </ng-container>

        <!-- Min-Height Column -->
        <ng-container matColumnDef="minHeight">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Min-Height</th>
          <td mat-cell *matCellDef="let element">{{ element.minHeight }}</td>
        </ng-container>

        <!-- Max-Height Column -->
        <ng-container matColumnDef="maxHeight">
          <th mat-header-cell *matHeaderCellDef style="font-size: 20px">Max-Height</th>
          <td mat-cell *matCellDef="let element">{{ element.maxHeight }}</td>
        </ng-container>

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