<!--
  ~ Copyright (C) 2022 StApps
  ~ This program is free software: you can redistribute it and/or modify it
  ~ under the terms of the GNU General Public License as published by the Free
  ~ Software Foundation, version 3.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT
  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  ~ more details.
  ~
  ~ You should have received a copy of the GNU General Public License along with
  ~ this program. If not, see <https://www.gnu.org/licenses/>.
  -->

<ion-card *ngIf="setting">
  <ion-card-header
    *ngIf="
      {
        name: ('name' | thingTranslate: setting | titlecase),
        desc: ('description' | thingTranslate: setting | titlecase)
      };
      let vals
    "
  >
    <ion-card-subtitle>
      {{ vals.name }}
      <ion-icon *ngIf="compactView" name="info" (click)="presentAlert(vals.name, vals.desc)"></ion-icon>
    </ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    <ion-note *ngIf="!compactView">{{ 'description' | thingTranslate: setting | titlecase }}</ion-note>

    <div [ngSwitch]="setting.inputType" *ngIf="isVisible">
      <ion-item *ngSwitchCase="'number'">
        <ion-label></ion-label>
        <ion-input
          type="number"
          [(ngModel)]="setting.value"
          value="{{ setting.value }}"
          (ionChange)="settingChanged()"
        ></ion-input>
      </ion-item>

      <ion-item *ngSwitchCase="'text'">
        <ion-label></ion-label>
        <ion-input
          type="text"
          [(ngModel)]="setting.value"
          value="{{ setting.value }}"
          (ionChange)="settingChanged()"
        ></ion-input>
      </ion-item>

      <ion-item *ngSwitchCase="'password'">
        <ion-label></ion-label>
        <ion-input
          type="password"
          [(ngModel)]="setting.value"
          value="{{ setting.value }}"
          (ionChange)="settingChanged()"
        ></ion-input>
      </ion-item>

      <ion-item *ngSwitchCase="'single choice'">
        <ion-label></ion-label>
        <!--    if values are boolean show as toggle    -->
        <ion-toggle
          *ngIf="typeOf(setting.defaultValue) === 'boolean'"
          [(ngModel)]="setting.value"
          (ionChange)="settingChanged()"
        ></ion-toggle>
        <!--    else show select input    -->
        <ion-select
          *ngIf="typeOf(setting.defaultValue) !== 'boolean'"
          interface="popover"
          [(ngModel)]="setting.value"
          (ionChange)="settingChanged()"
        >
          <ion-select-option *ngFor="let val of setting.values; index as i" [value]="val">
            <div *ngIf="typeOf(val) !== 'number'">
              {{ ('values' | thingTranslate: setting)[i] | titlecase }}
            </div>
            <div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
          </ion-select-option>
        </ion-select>
      </ion-item>

      <ion-item *ngSwitchCase="'multiple choice'">
        <ion-label></ion-label>
        <ion-select [(ngModel)]="setting.value" multiple="true" (ionChange)="settingChanged()">
          <ion-select-option *ngFor="let val of setting.values; index as i" [value]="val">
            <div *ngIf="typeOf(val) !== 'number'">
              {{ ('values' | thingTranslate: setting)[i] | titlecase }}
            </div>
            <div *ngIf="typeOf(val) === 'number'">{{ val }}</div>
          </ion-select-option>
        </ion-select>
      </ion-item>
    </div>
  </ion-card-content>
</ion-card>
