<ion-header>
  <ion-toolbar mode="md" class="ion-justify-content-center" style="--background: var(--ion-color-toolbar-primary); color: var(--ion-title-color)">
    <ion-title>{{ component.alias }}</ion-title>
    <ion-buttons slot="end">
      <oe-help-button key="REDIRECT.CONTROLLER_IO_CHANNEL_SINGLE_THRESHOLD" useDefaultPrefix="false"></oe-help-button>
      <ion-button (click)="modalCtrl.dismiss()">
        <ion-icon name="close-outline" style="color: var(--ion-title-color)"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

@if (service.currentEdge(); as edge) {
  @if (edge.currentData | async; as currentData) {
    @if (currentData.summary; as sum) {
      <ion-content>
        @if (!loading) {
          <ion-card-content class="underline">
            <table class="full_width">
              <tr>
                <td style="width: 65%" translate>GENERAL.STATE</td>
                <td style="width: 35%" class="align_right">
                  @switch (currentData.channel[outputChannel]) {
                    @case (1) {
                      <span translate>GENERAL.ON</span>
                    }
                    @case (0) {
                      <span translate>GENERAL.OFF</span>
                    }
                    @default {
                      <ion-icon name="help-outline"></ion-icon>
                    }
                  }
                </td>
              </tr>
            </table>
          </ion-card-content>
          <ion-card-content class="underline">
            <table class="full_width">
              <tr>
                <td style="width: 65%" translate>GENERAL.MODE</td>
              </tr>
            </table>
            <ion-segment (ionChange)="updateMode($event)" value="{{ component.properties['mode'] }}" scrollable="false">
              <ion-segment-button value="ON">
                <ion-label>
                  {{ "GENERAL.ON" | translate }}
                </ion-label>
                <ion-icon [color]="component.properties['mode'] === 'ON' ? 'success' : 'normal'" style="width: 40px" name="play-outline"></ion-icon>
              </ion-segment-button>
              <ion-segment-button value="AUTOMATIC">
                <ion-label>
                  {{ "GENERAL.AUTOMATIC" | translate }}
                </ion-label>
                <ion-icon [color]="component.properties['mode'] === 'AUTOMATIC' ? 'primary' : 'normal'" style="width: 40px" name="sunny-outline"> </ion-icon>
              </ion-segment-button>
              <ion-segment-button value="OFF">
                <ion-label>
                  {{ "GENERAL.OFF" | translate }}
                </ion-label>
                <ion-icon [color]="component.properties['mode'] === 'OFF' ? 'danger' : 'normal'" name="power-outline" style="width: 40px"></ion-icon>
              </ion-segment-button>
            </ion-segment>
          </ion-card-content>
          @if (component.properties["mode"] === "AUTOMATIC" && !loading) {
            <form [formGroup]="formGroup">
              @if (inputMode?.value === "OTHER") {
                <ion-card-content class="underline">
                  <table class="full_width">
                    <tr>
                      <td style="width: 50%" translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.DEPENDEND_ON</td>
                      <td style="width: 50%" class="align_right">
                        <span translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.OTHER</span>
                        ({{ component.properties.inputChannelAddress }})
                      </td>
                    </tr>
                  </table>
                </ion-card-content>
              }
              @if (inputMode.value !== "OTHER") {
                <ion-card-content class="ion-no-padding">
                  <ion-row>
                    <ion-col class="ion-no-padding" size="12">
                      <ion-item lines="none" class="noPadding">
                        <ion-select formControlName="inputMode" [value]="inputMode.value" (ionChange)="updateInputMode($event)" [label]="'EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.DEPENDEND_ON' | translate">
                          <ion-select-option value="SOC" translate>GENERAL.SOC</ion-select-option>
                          <ion-select-option value="PRODUCTION" translate>GENERAL.PRODUCTION</ion-select-option>
                          <ion-select-option value="GRIDSELL" translate>GENERAL.GRID_SELL</ion-select-option>
                          <ion-select-option value="GRIDBUY" translate>GENERAL.GRID_BUY</ion-select-option>
                        </ion-select>
                      </ion-item>
                    </ion-col>
                  </ion-row>
                </ion-card-content>
              }
              @if (inputMode.value !== "SOC" && inputMode.value !== "PRODUCTION") {
                <ion-card-content class="underline" style="padding-top: 0">
                  <table class="full_width">
                    <tr>
                      <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.SWITCHED_LOAD_POWER</td>
                      <td style="width: 35%" class="align_right">
                        <ion-item lines="inset" class="noPadding">
                          <ion-input class="regularFont" type="number" formControlName="switchedLoadPower" style="text-align: end" label="&nbsp;W" class="regularFont"> </ion-input>
                        </ion-item>
                      </td>
                    </tr>
                  </table>
                  @if (formGroup.controls.switchedLoadPower.dirty && formGroup.controls.inputMode.value === "GRIDSELL") {
                    <table class="full_width">
                      <tr>
                        <td style="width: 100%">
                          <ion-text color="danger" translate> EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.MORE_THAN_MAX_POWER </ion-text>
                        </td>
                      </tr>
                    </table>
                  }
                </ion-card-content>
              }
              <ion-card-content class="underline">
                <table class="full_width">
                  <tr>
                    <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.CURRENT_VALUE</td>
                    @switch (inputMode.value) {
                      @case ("SOC") {
                        <td style="width: 35%" class="align_right">
                          {{ sum.storage.soc | unitvalue: "%" }}
                        </td>
                      }
                      @case ("GRIDSELL") {
                        <td style="width: 35%" class="align_right">
                          {{ sum.grid.sellActivePower | unitvalue: "W" }}
                        </td>
                      }
                      @case ("GRIDBUY") {
                        <td style="width: 35%" class="align_right">
                          {{ sum.grid.buyActivePower | unitvalue: "W" }}
                        </td>
                      }
                      @case ("PRODUCTION") {
                        <td style="width: 35%" class="align_right">
                          {{ sum.production.activePower | unitvalue: "W" }}
                        </td>
                      }
                      @case ("OTHER") {
                        <td style="width: 35%" class="align_right">
                          {{ currentData.channel[component.properties["inputChannelAddress"]] }}
                          @if (inputChannelUnit) {
                            <div>&nbsp;{{ inputChannelUnit }}</div>
                          }
                        </td>
                      }
                    }
                  </tr>
                </table>
                @if (inputMode.value === "SOC") {
                  <table class="full_width">
                    <tr>
                      <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.THRESHOLD</td>
                      <td style="width: 35%" class="align_right">
                        {{ threshold.value | unitvalue: "%" }}
                      </td>
                    </tr>
                  </table>
                  <table class="full_width">
                    <tr>
                      <ion-range formControlName="threshold" pin color="dark" min="1" max="100" [value]="threshold.value">
                        <ion-label slot="start">
                          {{ 0 | unitvalue: "%" }}
                        </ion-label>
                        <ion-label slot="end">
                          {{ 100 | unitvalue: "%" }}
                        </ion-label>
                      </ion-range>
                    </tr>
                  </table>
                }
                @if (inputMode?.value !== "SOC") {
                  <table class="full_width">
                    <tr>
                      <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.THRESHOLD</td>
                      <td style="width: 35%" class="align_right">
                        <ion-item lines="inset" class="noPadding">
                          @if (inputChannelUnit) {
                            <ion-label class="regularFont">&nbsp;{{ inputChannelUnit }}</ion-label>
                          }
                          <ion-input class="regularFont" style="text-align: end" type="number" formControlName="threshold"> </ion-input>
                        </ion-item>
                      </td>
                    </tr>
                  </table>
                }
              </ion-card-content>
              <ion-card-content class="underline">
                <table class="full_width">
                  <tr>
                    <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.BEHAVIOUR</td>
                  </tr>
                </table>
                <!-- regular behaviour for invert if GridSell is not selected -->
                @if (inputMode !== null && inputMode.value !== "GRIDSELL") {
                  <ion-segment formControlName="invert" scrollable="false" [value]="formGroup.controls['invert'].value">
                    <ion-segment-button [value]="false">
                      <ion-label>
                        @if (inputMode?.value === "SOC") {
                          <span translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.SWITCH_ON_ABOVE</span>
                          {{ threshold.value | unitvalue: "%" }}
                        } @else {
                          <span translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.SWITCH_ON_ABOVE</span>
                          {{ threshold.value | unitvalue: inputChannelUnit }}
                        }
                      </ion-label>
                      <ion-icon style="width: 40px" name="arrow-up-outline"></ion-icon>
                    </ion-segment-button>
                    <ion-segment-button [value]="true">
                      <ion-label>
                        @if (inputMode?.value === "SOC") {
                          <span translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.SWITCH_ON_BELOW</span>
                          {{ threshold.value | unitvalue: "%" }}
                        } @else {
                          <span translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.SWITCH_ON_BELOW</span>
                          {{ threshold.value | unitvalue: inputChannelUnit }}
                        }
                      </ion-label>
                      <ion-icon style="width: 40px" name="arrow-down-outline"></ion-icon>
                    </ion-segment-button>
                  </ion-segment>
                }
                <!-- invert behaviour for invert if GridSell is selected -->
                @if (formGroup?.controls["invert"]?.value !== null && inputMode && inputMode.value === "GRIDSELL") {
                  <ion-segment formControlName="invert" scrollable="false" [value]="invert.value">
                    <ion-segment-button [value]="true">
                      <ion-label>
                        <span translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.SWITCH_ON_ABOVE</span>
                        {{ threshold.value | unitvalue: "W" }}
                      </ion-label>
                      <ion-icon style="width: 40px" name="arrow-up-outline"></ion-icon>
                    </ion-segment-button>
                    <ion-segment-button [value]="false">
                      <ion-label>
                        <span translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.SWITCH_ON_BELOW</span>
                        {{ threshold.value | unitvalue: "W" }}
                      </ion-label>
                      <ion-icon style="width: 40px" name="arrow-down-outline"></ion-icon>
                    </ion-segment-button>
                  </ion-segment>
                }
              </ion-card-content>
              <ion-card-content>
                <table class="full_width">
                  <tr>
                    <td style="width: 65%" translate>EDGE.INDEX.WIDGETS.SINGLETHRESHOLD.MIN_SWITCHING_TIME</td>
                    <td style="width: 35%" class="align_right">
                      <ion-item lines="inset" class="noPadding">
                        <ion-input class="regularFont" type="number" formControlName="minimumSwitchingTime" inputmode="decimal" style="text-align: end"> </ion-input>
                        <ion-label class="regularFont">&nbsp;s</ion-label>
                      </ion-item>
                    </td>
                  </tr>
                </table>
              </ion-card-content>
            </form>
            @if (formGroup.dirty) {
              <ion-fab class="ion-padding-bottom" vertical="bottom" horizontal="center" slot="fixed">
                <ion-fab-button (click)="applyChanges()">
                  <ion-icon size="large" name="oe-checkmark"> </ion-icon>
                </ion-fab-button>
              </ion-fab>
            }
          }
        }
        @if (loading) {
          <ion-grid>
            <ion-progress-bar type="indeterminate"></ion-progress-bar>
          </ion-grid>
        }
      </ion-content>
    }
  }
}
