<h1 mat-dialog-title class="prevent-select">Configurar activador</h1>
<div mat-dialog-content class="prevent-select">
  <!--GRID DE CONFIGURACIÓN GENERAL-->
  <mat-grid-list cols="2" rowHeight="92px">
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Tipo de activador</mat-label>
        <mat-select [formControl]="activatorType" #type>
          <mat-option value="CA">Calendario</mat-option>
          <mat-option value="SI">Síntoma</mat-option>
          <mat-option value="ME">Medida</mat-option>
          <mat-option value="VA">Valor</mat-option>
        </mat-select>
        <mat-error *ngIf="activatorType.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Prioridad</mat-label>
        <mat-select [formControl]="priority">
          <mat-option value="BA">Baja</mat-option>
          <mat-option value="ME">Media</mat-option>
          <mat-option value="AL">Alta</mat-option>
          <mat-option value="MA">Muy alta</mat-option>
        </mat-select>
        <mat-error *ngIf="priority.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>
  <!--GRID DE CONFIGURACIÓN PARA ACTIVADOR POR CALENDARIO-->
  <mat-grid-list cols="2" rowHeight="92px" *ngIf="type.value == 'CA'">
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Fecha de inicio</mat-label>
        <input matInput [matDatepicker]="startDatePicker" [formControl]="startDateControl!">
        <mat-datepicker-toggle matIconSuffix [for]="startDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #startDatePicker></mat-datepicker>
        <mat-error *ngIf="startDateControl!.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Hora de inicio</mat-label>
        <mat-select [formControl]="startHour">
          <mat-option *ngFor="let hour of hours" [value]="hour">{{ hour }}</mat-option>
        </mat-select>
        <mat-error *ngIf="startHour.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Repetición</mat-label>
        <mat-select [formControl]="repeat" #repeatControl (valueChange)="repeatChanges(repeatControl.value)">
          <mat-option value="NR" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            No se repite
          </mat-option>
          <mat-option value="SE" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Semanalmente los {{ dayNames[startDateControl!.value.getDay()] }}
          </mat-option>
          <mat-option value="ME" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Mensualmente los días {{ startDateControl!.value.getDate() }}
          </mat-option>
          <mat-option value="AN" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Anualmente el {{ startDateControl!.value.getDate() }} de {{ MONTHS[startDateControl!.value.getMonth()] }}
          </mat-option>
          <mat-option value="TD" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Todos los días a partir del {{ dayNames[startDateControl!.value.getDay()] }} {{ startDateControl!.value.getDate() }} de {{ MONTHS[startDateControl!.value.getMonth()] }} del {{ startDateControl!.value.getFullYear() }}
          </mat-option>
          <mat-option value="PE" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Personalizado...
          </mat-option>
        </mat-select>
        <mat-hint *ngIf="repeat.value == 'PE'" [matTooltip]="customDisplayed">{{ customDisplayed }}</mat-hint>
        <mat-error *ngIf="repeat.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Color</mat-label>
        <input matInput [formControl]="eventColor">
        <ngx-colors style="margin-left: -16px;" matSuffix ngx-colors-trigger [formControl]="colorPicker"></ngx-colors>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>
  <!--GRID DE CONFIGURACIÓN PARA ACTIVADOR POR SINTOMA-->
  <mat-grid-list cols="2" rowHeight="92px" *ngIf="type.value == 'SI'">
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Síntoma</mat-label>
        <mat-select [formControl]="signControl">
          <mat-option value="SIN1">Sobrecalentamiento</mat-option>
          <mat-option value="SIN2">Rechinido</mat-option>
          <mat-option value="SIN3">Fundido</mat-option>
          <mat-option value="SIN4">Vibración</mat-option>
        </mat-select>
        <mat-error *ngIf="signControl.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Fecha de inicio</mat-label>
        <input matInput [matDatepicker]="startDatePicker" [formControl]="startDateControl!">
        <mat-datepicker-toggle matIconSuffix [for]="startDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #startDatePicker></mat-datepicker>
        <mat-error *ngIf="startDateControl!.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Hora de inicio</mat-label>
        <mat-select [formControl]="startHour">
          <mat-option *ngFor="let hour of hours" [value]="hour">{{ hour }}</mat-option>
        </mat-select>
        <mat-error *ngIf="startHour.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Repetición</mat-label>
        <mat-select [formControl]="repeat" #repeatControl (valueChange)="repeatChanges(repeatControl.value)">
          <mat-option value="NR" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            No se repite
          </mat-option>
          <mat-option value="SE" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Semanalmente los {{ dayNames[startDateControl!.value.getDay()] }}
          </mat-option>
          <mat-option value="ME" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Mensualmente los días {{ startDateControl!.value.getDate() }}
          </mat-option>
          <mat-option value="AN" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Anualmente el {{ startDateControl!.value.getDate() }} de {{ MONTHS[startDateControl!.value.getMonth()] }}
          </mat-option>
          <mat-option value="TD" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Todos los días a partir del {{ dayNames[startDateControl!.value.getDay()] }} {{ startDateControl!.value.getDate() }} de {{ MONTHS[startDateControl!.value.getMonth()] }} del {{ startDateControl!.value.getFullYear() }}
          </mat-option>
          <mat-option value="PE" *ngIf="startDateControl!.value != '' && startDateControl!.value != undefined">
            Personalizado...
          </mat-option>
        </mat-select>
        <mat-hint *ngIf="repeat.value == 'PE'" [matTooltip]="customDisplayed">{{ customDisplayed }}</mat-hint>
        <mat-error *ngIf="repeat.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Color</mat-label>
        <input matInput [formControl]="eventColor">
        <ngx-colors style="margin-left: -16px;" matSuffix ngx-colors-trigger [formControl]="colorPicker"></ngx-colors>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>
  <!--GRID DE CONFIGURACIÓN PARA ACTIVADOR POR MEDIDA-->
  <mat-grid-list cols="2" rowHeight="92px" *ngIf="type.value == 'ME'">
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Valor mínimo</mat-label>
        <input matInput [formControl]="minValueControl" (input)="minValueControl.markAsTouched()">
        <mat-error *ngIf="minValueControl.hasError('required')">Este campo es obligatorio</mat-error>
        <mat-error *ngIf="minValueControl.hasError('pattern')">El valor ingresado es inválido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Valor máximo</mat-label>
        <input matInput [formControl]="maxValueControl" (input)="maxValueControl.markAsTouched()">
        <mat-error *ngIf="maxValueControl.hasError('required')">Este campo es obligatorio</mat-error>
        <mat-error *ngIf="maxValueControl.hasError('pattern')">El valor ingresado es inválido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Magnitud</mat-label>
        <mat-select #magnitude [formControl]="magnitudeControl" (valueChange)="checkMagnitude(magnitude.value)">
          <mat-option *ngFor="let item of magnitudes" [value]="item.MAGNITUDE">
            {{ item.LABEL }}
          </mat-option>
          <mat-option value="OTR">Otra...</mat-option>
        </mat-select>
        <mat-hint *ngIf="customMagnitude != ''">{{ customMagnitude }}</mat-hint>
        <mat-error *ngIf="magnitudeControl.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline" *ngIf="magnitude.value != 'OTR'">
        <mat-label>Unidad</mat-label>
        <mat-select #unit [formControl]="unitControl" (valueChange)="checkUnit(unit.value)">
          <mat-option *ngFor="let item of getUnits(magnitude.value)" [value]="item.UNIT">
            {{ item.LABEL }}
          </mat-option>
          <mat-option value="OTR">Otra...</mat-option>
        </mat-select>
        <mat-hint *ngIf="customUnit != null && customUnit != undefined">{{ customUnit.LABEL }}</mat-hint>
        <mat-error *ngIf="unitControl.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
      <mat-form-field class="w-100" appearance="outline" *ngIf="magnitude.value == 'OTR'">
        <mat-label>Unidad</mat-label>
        <input matInput [formControl]="unitControl">
        <mat-error *ngIf="unitControl.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Color</mat-label>
        <input matInput [formControl]="eventColor">
        <ngx-colors style="margin-left: -16px;" matSuffix ngx-colors-trigger [formControl]="colorPicker"></ngx-colors>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>
  <!--GRID DE CONFIGURACIÓN PARA ACTIVADOR POR VALOR-->
  <mat-grid-list cols="2" rowHeight="92px" *ngIf="type.value == 'VA'">
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Comparación</mat-label>
        <mat-select [formControl]="comparisonControl">
          <mat-option value="AC">Acumulado</mat-option>
          <mat-option value="UR">Último registro</mat-option>
        </mat-select>
        <mat-error *ngIf="comparisonControl.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Valor límite</mat-label>
        <input matInput [formControl]="limitValueControl" (input)="limitValueControl.markAsTouched()">
        <mat-error *ngIf="limitValueControl.hasError('required')">Este campo es reqerido</mat-error>
        <mat-error *ngIf="limitValueControl.hasError('pattern')">El valor ingresado es inválido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Magnitud</mat-label>
        <mat-select #magnitude [formControl]="magnitudeControl" (valueChange)="checkMagnitude(magnitude.value)">
          <mat-option *ngFor="let item of magnitudes" [value]="item.MAGNITUDE">
            {{ item.LABEL }}
          </mat-option>
          <mat-option value="OTR">Otra...</mat-option>
        </mat-select>
        <mat-hint *ngIf="customMagnitude != ''">{{ customMagnitude }}</mat-hint>
        <mat-error *ngIf="magnitudeControl.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline" *ngIf="magnitude.value != 'OTR'">
        <mat-label>Unidad</mat-label>
        <mat-select #unit [formControl]="unitControl" (valueChange)="checkUnit(unit.value)">
          <mat-option *ngFor="let item of getUnits(magnitude.value)" [value]="item.UNIT">
            {{ item.LABEL }}
          </mat-option>
          <mat-option value="OTR">Otra...</mat-option>
        </mat-select>
        <mat-hint *ngIf="customUnit != null && customUnit != undefined">{{ customUnit.LABEL }}</mat-hint>
        <mat-error *ngIf="unitControl.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
      <mat-form-field class="w-100" appearance="outline" *ngIf="magnitude.value == 'OTR'">
        <mat-label>Unidad</mat-label>
        <input matInput [formControl]="unitControl">
        <mat-error *ngIf="unitControl.hasError('required')">Este campo es reqerido</mat-error>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile>
      <mat-form-field class="w-100" appearance="outline">
        <mat-label>Color</mat-label>
        <input matInput [formControl]="eventColor">
        <ngx-colors style="margin-left: -16px;" matSuffix ngx-colors-trigger [formControl]="colorPicker"></ngx-colors>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button (click)="saveActivator()">Guardar activador</button>
</div>