<ion-content>
  <ngx-spinner [name]="spinnerId"></ngx-spinner>
  @if (config) {
    <ion-grid>
      <ion-row class="ion-justify-content-center">
        <ion-col size="12" size-md="6">
          <ion-card>
            <ion-item color="light" lines="full">
              <ion-icon slot="start" name="today-outline" color="primary"></ion-icon>
              <ion-label>{{"CHANNELS.ADD_CHANNEL" | translate}}</ion-label>
            </ion-item>
            <ion-card-content>
              <ion-list>
                <ion-item lines="none">
                  <ion-select justify="space-between" style="white-space: initial;width: 100%;" #selectedComponentId
                    interface="popover" labelPlacement="start" [label]="'CHANNELS.COMPONENT'| translate"
                    (ionChange)="onSelectedComponentChanged($event)" class="ion-text-align-left custom-ion-popover"
                    [interfaceOptions]="{cssClass: 'custom-ion-popover'}" aria-modal="true">
                    @for (entry of (config.components | keys); track entry) {
                      <ion-select-option style="white-space: normal !important;"
                        [value]="entry.key">
                      {{ entry.value.id }} ({{ entry.value.alias }})</ion-select-option>
                    }
                  </ion-select>
                </ion-item>
                <ion-item lines="none">
                  <ngx-spinner [name]="selectedComponentId.value"
                  class="custom-theme-text custom-ion-popover"></ngx-spinner>
                  <ion-select style="white-space: initial;width: 100%;" #selectedChannelId interface="popover"
                    [disabled]="!selectedComponentId?.value" [label]="'CHANNELS.CHANNEL'| translate"
                    justify="space-between" [multiple]="true" class="custom-ion-popover"
                    [interfaceOptions]="{cssClass: 'custom-ion-popover'}" aria-modal="true">
                    @if (selectedComponentId?.value) {
                      @for (entry of channelsPerComponent.get(selectedComponentId.value).channels | keyvalue; track entry) {
                        <ion-select-option
                          [value]="entry.key">
                        {{ entry.key }}</ion-select-option>
                      }
                    }
                  </ion-select>
                </ion-item>
              </ion-list>
              @if (selectedComponentId && selectedComponentId.value && selectedChannelId && selectedChannelId.value) {
                <ion-button style="white-space: initial; line-break: strict;"
                  expand="block"
                  (click)="subscribeChannels(selectedComponentId.value, selectedChannelId.value); selectedComponentId.value = null;selectedChannelId.value = null"><span
                translate>CHANNELS.ADD</span>
              </ion-button>
            }
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col size="12" size-md="4">
        <ion-card>
          <ion-item color="light" lines="full">
            <ion-icon slot="start" name="today-outline" color="primary"></ion-icon>
            <ion-label>{{"CHANNELS.SAVE" | translate}}</ion-label>
          </ion-item>
          <ion-card-content>
            @if (edge.id) {
              <ion-button expand="block" (click)="saveChannelsInLocalStorage()"><span
              translate>CHANNELS.SAVE</span></ion-button>
            }
            <ion-label>{{"CHANNELS.SAVE_DESCRIPTION" | translate: { edgeShortName: environment.edgeShortName } }}
            </ion-label>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      @if (!isLoading && selectedComponentChannels && edge?.currentData | async; as currentData) {
        @for (component of (selectedComponentChannels | keyvalue); track component) {
          <ion-col size="12" size-md="4">
            <ion-card>
              <ion-item color="light" lines="full">
                <ion-icon slot="start" name="today-outline" color="primary"></ion-icon>
                <ion-label>{{component.key}}</ion-label>
              </ion-item>
              <ion-card-content>
                <ion-list>
                  @for (channel of component.value | keyvalue; track channel) {
                    <ion-item lines="inset">
                      <ion-label style="white-space:initial"><span translate>CHANNELS.CHANNEL</span>:
                    {{channel.key}}</ion-label>
                    <ion-button (click)="unsubscribeChannel(component.key, channel.key)" slot="end" color="light"
                      size="small">
                      <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
                    </ion-button>
                  </ion-item>
                  @if (channelsPerComponent.get(component.key).channels[channel.key]; as channelConfig) {
                    <ion-card-content
                      >
                      <!-- show meta information -->
                      <ion-item>
                        <div style="display: block; width: 30%;">
                          Meta&nbsp;
                        </div>
                        <ion-text style="display: block; width: 100%;align-items: end;" color="medium">
                          Type: {{ channelConfig.type.toLowerCase() }}
                          / Access-Mode: {{ channelConfig.accessMode }}
                          <span>&nbsp;</span>
                          @if (channelConfig.text) {
                            <span>/ Text:{{ channelConfig.text }}</span>
                          }
                        </ion-text>
                      </ion-item>
                      <!-- show Channel value (if it is not a Write-Only Channel) -->
                      @if (channelConfig.accessMode !== 'WO') {
                        <ion-item>
                          <ion-label>{{"CHANNELS.VALUE" | translate}}</ion-label>
                          <ion-text>
                            <!-- show current value of Channel-->
                            {{ currentData.channel[component.key + '/' + channel.key] }}&nbsp;{{ channelConfig.unit }}
                            <!-- show value as string for enum values -->
                            @if (channelConfig.category === 'ENUM') {
                              @for (option of (channelConfig.options | keys); track option) {
                                @if (option.value === currentData.channel[component.key + '/' + channel.key]) {
                                  <span>
                                    ({{ option.key }})
                                  </span>
                                }
                              }
                            }
                            <!-- show active/inactive string for StateChannels -->
                            @if (channelConfig.category === 'STATE') {
                              @if (currentData.channel[component.key + '/' + channel.key] === 1) {
                                <span>(State is
                                SET)</span>
                              }
                              @if (currentData.channel[component.key + '/' + channel.key] === 0) {
                                <span>(State is not
                                set)</span>
                              }
                            }
                            <!-- show active/inactive string for StateChannels -->
                            @if (channelConfig.category === 'OPENEMS_TYPE' && channelConfig.type === 'BOOLEAN') {
                              @if (currentData.channel[component.key + '/' + channel.key] === 1) {
                                <span>(On)</span>
                              }
                              @if (currentData.channel[component.key + '/' + channel.key] === 0) {
                                <span>(Off)</span>
                              }
                            }
                          </ion-text>
                        </ion-item>
                      }
                      <!-- show input field to write value for RW/RO channels -->
                      @if (['RW', 'WO'].includes(channelConfig.accessMode)) {
                        <ion-item>
                          <ion-label>{{"CHANNELS.SET_VALUE"  | translate}}</ion-label>
                          @if (channelConfig.type === 'BOOLEAN') {
                            <!-- show Toggle for boolean value  -->
                            <ion-toggle tabindex="0" mode="md" #valueToggle></ion-toggle>
                            <ion-button (click)="setChannelValue(component.key, channel.key, valueToggle.checked)"
                              slot="end" color="light">
                              <ion-icon slot="icon-only" name="send-outline"></ion-icon>
                            </ion-button>
                          } @else {
                            <ion-input placeholder="value" #channelValue></ion-input>
                            <ion-button (click)="setChannelValue(component.key, channel.key, channelValue.value)" slot="end"
                              color="light">
                              <ion-icon slot="icon-only" name="send-outline"></ion-icon>
                            </ion-button>
                          }
                        </ion-item>
                      }
                      @if (channel.value.showPersistencePriority) {
                        <ion-item lines="none">
                          <ion-note style="white-space: initial;">
                            <ion-text color="warning">
                              Warnung:
                            </ion-text> Channelwert wird nicht sekündlich zum Online-Monitoring übertragen
                          </ion-note>
                        </ion-item>
                      }
                    </ion-card-content>
                  }
                }
                <ion-item lines="none">
                  <ion-select [multiple]="true" [interfaceOptions]="{cssClass: 'custom-ion-popover'}"
                    interface="popover" #selectedChannelId [label]="'CHANNELS.MORE_CHANNELS' | translate"
                    aria-modal="true">
                    @if (component.key) {
                      @for (entry of channelsPerComponent.get(component.key).channels | keyvalue; track entry) {
                        <ion-select-option color="danger"
                          [value]="entry.key">
                          {{ entry.key }}
                        </ion-select-option>
                      }
                    }
                  </ion-select>
                </ion-item>
                @if (selectedChannelId?.value) {
                  <ion-button expand="block"
                    (click)="subscribeChannels(component.key, selectedChannelId.value); selectedChannelId.value = null"
                    translate>
                  CHANNELS.ADD</ion-button>
                }
              </ion-list>
            </ion-card-content>
          </ion-card>
        </ion-col>
      }
    }
  </ion-row>
</ion-grid>
}
@if (isAtLeastOneChannelExistingInEdgeConfig) {
  <ion-item lines="none">
    <ion-label>
      <ng-container>
        <ion-row class="ion-justify-content-center">
          <ion-col size="12" size-md="4">
            <ion-card>
              <ion-item color="light" lines="full">
                <ion-icon color="danger" size="large" slot="start" name="alert-circle"></ion-icon>
                A component couldn't be found!
              </ion-item>
            </ion-card>
          </ion-col>
        </ion-row>
      </ng-container>
    </ion-label>
  </ion-item>
}
</ion-content>
