<!--
  ~ 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/>.
  -->

<stapps-context contentId="map"></stapps-context>

<ion-header class="ion-no-border" translucent="true">
  <ion-toolbar color="primary" mode="ios">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'map.page.TITLE' | translate }}</ion-title>
  </ion-toolbar>
  <ion-toolbar color="primary">
    <ion-searchbar
      (keyup)="searchKeyUp($event)"
      (keyup.enter)="hideKeyboard()"
      (search)="hideKeyboard()"
      [(ngModel)]="queryText"
      (ionClear)="searchStringChanged()"
      mode="md"
      placeholder="{{ 'map.page.search_bar.placeholder' | translate }}"
      showClearButton="always"
      type="search"
      enterkeyhint="search"
      class="filterable"
    >
      <ion-menu-button menu="context" auto-hide="false">
        <ion-icon name="tune"></ion-icon>
      </ion-menu-button>
    </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen id="map">
  <div
    class="map-container"
    #mapContainer
    leaflet
    (leafletMapReady)="onMapReady($event)"
    (leafletClick)="resetView()"
    [leafletOptions]="options"
    [leafletMarkerCluster]="markerClusterData"
    [leafletMarkerClusterOptions]="markerClusterOptions"
  >
    <div *ngIf="position" [leafletLayer]="positionMarker"></div>
  </div>
  <div class="floating-content">
    <div class="map-buttons above">
      <ion-button
        *ngIf="items.length > 1"
        color="light"
        shape="round"
        size="small"
        (click)="mapListModal.present()"
      >
        <ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{ 'map.page.buttons.SHOW_LIST' | translate }}
      </ion-button>
      <ion-button color="light" shape="round" size="small" (click)="onPositionClick()">
        <ion-icon *ngIf="position !== null; else noLocationIcon" name="my_location"></ion-icon>
        <ng-template #noLocationIcon>
          <ion-icon
            *ngIf="locationStatus.location !== 'denied'; else deniedLocationIcon"
            name="location_searching"
          ></ion-icon>
        </ng-template>
        <ng-template #deniedLocationIcon>
          <ion-icon name="location_disabled"></ion-icon>
        </ng-template>
      </ion-button>
    </div>
    <stapps-map-item *ngIf="items.length === 1" [item]="items[0]" (onClose)="resetView()"></stapps-map-item>
  </div>
  <div class="map-buttons floating-buttons">
    <ion-button
      *ngIf="items.length > 1"
      color="light"
      shape="round"
      size="small"
      (click)="mapListModal.present()"
    >
      <ion-icon name="list"></ion-icon>&nbsp;&nbsp;{{ 'map.page.buttons.SHOW_LIST' | translate }}
    </ion-button>
    <ion-button color="light" shape="round" size="small" (click)="onPositionClick()">
      <ion-icon *ngIf="position !== null; else noLocationIcon" name="my_location"></ion-icon>
      <ng-template #noLocationIcon>
        <ion-icon
          *ngIf="locationStatus && locationStatus.location === 'denied'; else pendingLocationIcon"
          name="location_disabled"
        ></ion-icon>
      </ng-template>
      <ng-template #pendingLocationIcon>
        <ion-icon name="location_searching"></ion-icon>
      </ng-template>
    </ion-button>
  </div>

  <ion-modal [canDismiss]="true" #mapListModal>
    <ng-template>
      <map-list-modal
        style="height: 100%"
        [filterQuery]="filterQuery"
        [mapBounds]="this.map.getBounds()"
        [queryText]="queryText"
      ></map-list-modal>
    </ng-template>
  </ion-modal>
</ion-content>
