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

<form [formGroup]="formGroup" [style.display]="formGroup ? 'initial' : 'none'" class="widget-settings-form">
  <div class="header">
    <h3 data-test="webcore.pinboard.edit-widget-title.h3">{{ pinboardI18n.widgetEditConfigurationTitle }}</h3>
    <span data-test="webcore.pinboard.edit-widget-description.span">{{
      pinboardI18n.widgetEditConfigurationDesc
    }}</span>
  </div>

  <ng-container *ngIf="widget">
    <ng-container *ngFor="let category of getAvailableCategories()">
      <!-- General Settings (Title, Sizes) -->
      <ng-container *ngIf="category.id === 'set_general'">
        <!-- TITLE -->
        <mat-form-field floatLabel="always">
          <mat-label>{{ pinboardI18n.title }}</mat-label>
          <input
            data-test="webcore.pinboard.edit-widget.form.title.input"
            matInput
            [required]="formGroup.get('showWidgetTitle').value"
            type="text"
            formControlName="title"
          />
          <mat-error
            data-test="webcore.pinboard.edit-widget.form.title.required.error"
            *ngIf="formGroup.get('title').hasError('required')"
            >{{ pinboardI18n.requiredField }}</mat-error
          >
        </mat-form-field>

        <!-- Display title on widget -->
        <mat-checkbox
          data-test="webcore.pinboard.edit-widget.form.show-widget-name.checkbox"
          type="checkbox"
          formControlName="showWidgetTitle"
          >{{ pinboardI18n.showWidgetTitle }} {{ pinboardI18n.title.toLowerCase() }}</mat-checkbox
        >

        <!-- RESPOND TO FILTER -->
        <mat-checkbox
          data-test="webcore.pinboard.edit-widget.form.respond-to-filter.checkbox"
          type="checkbox"
          formControlName="isLinkedToFilter"
          *ngIf="widget.widgetDefinition.canLinkToFilter && widget.widgetDefinition.hasLinkToFilterToggle"
          >{{ pinboardI18n.respondToFilter }}</mat-checkbox
        >

        <!-- SELECTBOX -->
        <mat-form-field>
          <mat-label>{{ pinboardI18n.width }}</mat-label>
          <mat-select data-test="webcore.pinboard.edit-widget.form.width.select" formControlName="width" required>
            <mat-option *ngFor="let width of configuration.availableWidths" [value]="width">{{ width }}</mat-option>
          </mat-select>
          <mat-error
            data-test="webcore.pinboard.edit-widget.form.width.required.error"
            *ngIf="formGroup.get('width').hasError('required')"
            >{{ pinboardI18n.requiredField }}</mat-error
          >
        </mat-form-field>
        <!-- SELECTBOX -->
        <mat-form-field>
          <mat-label>{{ pinboardI18n.height }}</mat-label>
          <mat-select data-test="webcore.pinboard.edit-widget.form.height.select" formControlName="height" required>
            <mat-option *ngFor="let height of configuration.availableHeights" [value]="height">{{ height }}</mat-option>
          </mat-select>
          <mat-error
            data-test="webcore.pinboard.edit-widget.form.height.required.error"
            *ngIf="formGroup.get('height').hasError('required')"
            >{{ pinboardI18n.requiredField }}</mat-error
          >
        </mat-form-field>
      </ng-container>

      <!-- User Settings -->
      <ng-container *ngFor="let usrSetting of getUserSettingsOfCategory(category)" [ngSwitch]="usrSetting.inputType">
        <!-- TEXTFIELD -->
        <mat-form-field *ngSwitchCase="inputType.TextBox" floatLabel="always">
          <mat-label>{{ usrSetting.label }}</mat-label>
          <input matInput type="text" [formControlName]="usrSetting.id" />
        </mat-form-field>

        <!-- SELECTBOX -->
        <mat-form-field *ngSwitchCase="inputType.SelectBox" floatLabel="always">
          <mat-label>{{ usrSetting.label }}</mat-label>
          <mat-select [formControlName]="usrSetting.id">
            <mat-option *ngFor="let opt of getSelectionValues(usrSetting) | async" [value]="opt.id">{{
              opt.label
            }}</mat-option>
          </mat-select>
        </mat-form-field>

        <!-- CHECKBOX -->
        <mat-checkbox *ngSwitchCase="inputType.CheckBox" [formControlName]="usrSetting.id"
          >{{ usrSetting.label }}
        </mat-checkbox>

        <!-- SLIDER -->
        <mat-slide-toggle *ngSwitchCase="inputType.ToggleSlider" [formControlName]="usrSetting.id">
          {{ usrSetting.label }}
        </mat-slide-toggle>
      </ng-container>
    </ng-container>
  </ng-container>

  <!-- Custom Settings Form -->
  <div [style.display]="customFormType ? 'inherit' : 'none'">
    <ng-container #customFormContainer></ng-container>
  </div>

  <div class="button-row">
    <button
      data-test="webcore.pinboard.edit-widget.form.save.button"
      class="button-primary"
      (click)="saveEdit()"
      name="save"
      [disabled]="isSaveDisabled"
    >
      {{ pinboardI18n.save }}
    </button>
    <button
      data-test="webcore.pinboard.edit-widget.form.cancel.button"
      class="button-secondary"
      (click)="cancelEdit()"
      name="cancel"
    >
      {{ pinboardI18n.cancel }}
    </button>
  </div>
</form>
