<!--
~ 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>
      @if (sortOption) {
        <ion-radio-group class="context-sort" [value]="0">
          <ion-list-header>
            <ion-icon name="sort"></ion-icon>
            <ion-title>{{ 'menu.context.sort.title' | translate | titlecase }}</ion-title>
          </ion-list-header>
          @for (value of sortOption.values; track value; let i = $index) {
            <ion-item class="sort-item" (click)="sortChanged(sortOption, sortOption.values[i])">
              <ion-radio [value]="i">
                {{ 'menu.context.sort.' + value.value | translate | titlecase }}
                @if (sortOption.value === value.value && value.reversible) {
                  <span>
                    @if (sortOption.reversed) {
                      <ion-icon name="arrow_downward"></ion-icon>
                    }
                    @if (!sortOption.reversed) {
                      <ion-icon name="arrow_upward"></ion-icon>
                    }
                  </span>
                }
              </ion-radio>
            </ion-item>
          }
        </ion-radio-group>
      }
    </ion-list>
    <!--        Filter Context -->
    @if (filterOption) {
      <div class="context-filter">
        <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>
        @for (facet of facets; track facet) {
          <ion-list class="filter-group">
            <div>
              <ion-list-header class="h3">
                <ion-label>
                  @if (facet.info.onlyOnType) {
                    <span
                      ><b>{{ facet.info.onlyOnType | titlecase }}</b> /
                    </span>
                  }
                  {{ facet.info.field | titlecase }}
                </ion-label>
              </ion-list-header>
              <div>
                @for (
                  bucket of !facet.compact ? facet.buckets.slice(0, compactFilterOptionCount) : facet.buckets;
                  track bucket
                ) {
                  <ion-item>
                    <ion-checkbox
                      [(ngModel)]="bucket.checked"
                      (ngModelChange)="filterChanged()"
                      [value]="{
                        field: facet.field,
                        value: bucket.key,
                        onlyOnType: facet.onlyOnType
                      }"
                      class="filter-item-label"
                    >
                      ({{ bucket.count }})
                      {{
                        facet.field === 'type'
                          ? (getTranslatedPropertyValue($any(bucket.key), 'type') | titlecase)
                          : (facet.onlyOnType &&
                              getTranslatedPropertyValue(facet.onlyOnType, facet.field, bucket.key)
                            | titlecase)
                      }}
                    </ion-checkbox>
                  </ion-item>
                }
                @if (!facet.compact && facet.buckets.length > compactFilterOptionCount) {
                  <ion-button fill="clear" (click)="facet.compact = true">
                    {{ 'menu.context.filter.showAll' | translate }}
                  </ion-button>
                }
              </div>
            </div>
          </ion-list>
        }
      </div>
    }
  </ion-content>
</ion-menu>
