<!--
~ Copyright (C) 2023 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>
  <ion-card-header>
    <ion-card-subtitle>{{ 'settings.calendar.title' | translate }}</ion-card-subtitle>
  </ion-card-header>

  <ion-card-content>
    <ion-list lines="none">
      <ion-item-group>
        <ion-item-divider>
          <ion-label>{{ 'settings.calendar.sync.title' | translate }}</ion-label>
        </ion-item-divider>
        <ion-item>
          <ion-toggle
            [disabled]="isWeb"
            [checked]="syncEnabled"
            label-placement="end"
            justify="start"
            (ionChange)="
              setSetting({
                sync: $any($event).detail.checked
              });
              syncCalendar($any($event).detail.checked)
            "
          >
            {{ 'settings.calendar.sync.syncWithCalendar' | translate }}
          </ion-toggle>
        </ion-item>
        <!--
        ~ TODO:
        ~ background fetch is too unreliable to suggest our users that
        ~ they'll get a notification upon change of event/dateseries.
        ~ This has to be a highly reliable service notifing users via APN/GCM.

        <ion-item>
          <ion-toggle
            [disabled]="isWeb"
            [checked]="notificationsEnabled"
            (ionChange)="
              setSetting({
                notifications: $event.detail.checked
              })
            "
            >
          </ion-toggle>
          <ion-label>{{
            'settings.calendar.sync.eventNotifications' | translate
          }}</ion-label>
        </ion-item>
        -->
        @if (!isWeb) {
          <ion-item>
            <ion-button [disabled]="isWeb || !syncEnabled" fill="clear" (click)="syncCalendar(true)">
              <ion-label>Sync Now</ion-label>
              <ion-icon slot="end" name="sync"></ion-icon>
            </ion-button>
          </ion-item>
        }
        @if (isWeb) {
          <ion-item>
            <ion-label color="medium" class="ion-text-wrap"
              ><b>{{ 'settings.calendar.sync.unavailableWeb' | translate }}</b></ion-label
            >
          </ion-item>
        }
      </ion-item-group>

      <ion-item-group>
        <ion-item-divider>
          <ion-label>{{ 'settings.calendar.export.title' | translate }}</ion-label>
        </ion-item-divider>
        <ion-item>
          <ion-button fill="clear" (click)="export()">
            <ion-label>{{ 'settings.calendar.export.exportEvents' | translate }}</ion-label>
            <ion-icon slot="end" name="download"></ion-icon>
          </ion-button>
        </ion-item>
        <ion-item>
          <ion-button fill="clear" (click)="backup()">
            <ion-label>{{ 'settings.calendar.export.backup' | translate }}</ion-label>
            <ion-icon slot="end" name="save"></ion-icon>
          </ion-button>
          <ion-button fill="clear" (click)="restoreInput.click()">
            <ion-label>{{ 'settings.calendar.export.restore' | translate }}</ion-label>
            <ion-icon slot="end" name="settings_backup_restore"></ion-icon>
          </ion-button>
          <!--suppress CheckEmptyScriptTag -->
          <input
            class="ion-hide"
            type="file"
            accept="application/json"
            #restoreInput
            (change)="restore($event)"
          />
        </ion-item>
      </ion-item-group>
    </ion-list>
  </ion-card-content>
</ion-card>
