<!--
  ~ 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-menu type="overlay" menuId="context" contentId="{{ contentId }}" maxEdgeStart="0" side="end">
  <ion-toolbar color="primary" mode="ios">
    <ion-label class="ion-padding-horizontal">
      <h1 class="ion-padding-horizontal">
        {{ 'menu.context.title' | translate | titlecase }}
      </h1>
    </ion-label>
  </ion-toolbar>
  <ion-content>
    <!-- Sort Context -->
    <ion-list>
      <ion-radio-group class="context-sort" *ngIf="sortOption" [value]="0">
        <ion-list-header>
          <ion-icon name="sort"></ion-icon>
          <ion-title>{{ 'menu.context.sort.title' | translate | titlecase }}</ion-title>
        </ion-list-header>
        <ion-item
          class="sort-item"
          *ngFor="let value of sortOption.values; index as i"
          (click)="sortChanged(sortOption, sortOption.values[i])"
        >
          <ion-label
            >{{ 'menu.context.sort.' + value.value | translate | titlecase }}
            <span *ngIf="sortOption.value === value.value && value.reversible">
              <ion-icon *ngIf="sortOption.reversed" name="arrow_downward"></ion-icon>
              <ion-icon *ngIf="!sortOption.reversed" name="arrow_upward"></ion-icon>
            </span>
          </ion-label>
          <ion-radio slot="end" [value]="i"></ion-radio>
        </ion-item>
      </ion-radio-group>
    </ion-list>
    <!--        Filter Context -->
    <div class="context-filter" *ngIf="filterOption">
      <ion-list-header>
        <ion-icon name="filter_list"></ion-icon>
        <ion-title>{{ 'menu.context.filter.title' | translate | titlecase }}</ion-title>
        <ion-button class="resetFilterButton" fill="clear" color="dark" (click)="resetFilter(filterOption)">
          <ion-icon name="delete"></ion-icon>
        </ion-button>
      </ion-list-header>

      <ion-list class="filter-group" *ngFor="let facet of facets">
        <div>
          <ion-list-header class="h3">
            <ion-label>
              <span *ngIf="facet.info.onlyOnType"
                ><b>{{ facet.info.onlyOnType | titlecase }}</b> /
              </span>
              {{ facet.info.field | titlecase }}
            </ion-label>
          </ion-list-header>
          <div>
            <ion-item
              *ngFor="
                let bucket of !facet.compact
                  ? facet.buckets.slice(0, compactFilterOptionCount)
                  : facet.buckets
              "
            >
              <ion-label class="filter-item-label">
                ({{ bucket.count }})
                {{
                  facet.field === 'type'
                    ? (getTranslatedPropertyValue($any(bucket.key), 'type') | titlecase)
                    : (getTranslatedPropertyValue(facet.onlyOnType, facet.field, bucket.key) | titlecase)
                }}
              </ion-label>
              <ion-checkbox
                [(ngModel)]="bucket.checked"
                (ngModelChange)="filterChanged()"
                [value]="{
                  field: facet.field,
                  value: bucket.key,
                  onlyOnType: facet.onlyOnType
                }"
              >
              </ion-checkbox>
            </ion-item>
            <ion-button
              fill="clear"
              *ngIf="!facet.compact && facet.buckets.length > compactFilterOptionCount"
              (click)="facet.compact = true"
            >
              {{ 'menu.context.filter.showAll' | translate }}
            </ion-button>
          </div>
        </div>
      </ion-list>
      <ion-button
        fill="clear"
        *ngIf="!filterOption.compact && filterOption.options.length > compactFilterOptionCount"
        (click)="filterOption.compact = true"
      >
        {{ 'menu.context.filter.showAll' | translate }}
      </ion-button>
    </div>
  </ion-content>
</ion-menu>
