<script setup lang="ts">
import 'leaflet/dist/leaflet.css'
import 'vue-leaflet-markercluster/dist/style.css'

import L from 'leaflet'
globalThis.L = L

import { LMap, LTileLayer, LControlZoom, LLayerGroup } from '@vue-leaflet/vue-leaflet'
import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'

import ReviewMarker from './components/map/ReviewMarker.vue'
import TokenMarker from './components/map/TokenMarker.vue'

import { storeToRefs } from 'pinia'
import { useReviewStore } from './stores/reviews'
import { useParisTokensStore } from './stores/parisTokens'
import { useMap } from './stores/map'
import MapSidebar from './components/map/MapSidebar.vue'

const { zoom, minZoom, center } = useMap()

const { markers: reviews } = useReviewStore()
const { markers: parisTokens } = useParisTokensStore()

const { activeLayers } = storeToRefs(useMap())
</script>

<template>
  <main>
    <LMap
      ref="map"
      :min-zoom
      v-model:zoom="zoom"
      v-model:center="center"
      :options="{ zoomControl: false }"
      :useGlobalLeaflet="true"
    >
      <LControlZoom position="bottomright" />

      <LTileLayer
        url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
        layer-type="base"
      />

      <!-- "Monnaie de Paris" CSGroup -->
      <LLayerGroup v-if="activeLayers.tokens && parisTokens.length > 0" :max-cluster-radius="18" :disable-clustering-at-zoom="14">
        <TokenMarker v-once v-for="marker in parisTokens" :key="marker.title" :marker />
      </LLayerGroup>

      <!-- Review CSGroup -->
      <LMarkerClusterGroup v-if="activeLayers.food && reviews.length > 0" :max-cluster-radius="18" :disable-clustering-at-zoom="14">
        <ReviewMarker v-once v-for="marker in reviews" :key="marker.title" :marker />
      </LMarkerClusterGroup>
    </LMap>
  </main>

  <MapSidebar />
</template>

<style lang="scss">
main {
  height: 100vh;
  width: 100vw;
  position: relative;
  z-index: 1;
}

.leaflet-marker-icon:not(.marker-cluster) {
  border-radius: 50%;
  box-shadow: 0 0 5px 3px color-mix(in srgb, var(--color-neutral-400) 66%, transparent);
}

.leaflet-popup-content-wrapper {
  border-radius: 5px;

  .leaflet-popup-content {
    margin: 10px 20px 10px 15px;

    p {
      margin-bottom: 0;
    }
  }
}

.marker-cluster span {
  font-weight: var(--font-weight-medium);
}

.marker-cluster-small {
  background-color: color-mix(in srgb, var(--color-green-500) 25%, transparent);

  div {
    background-color: color-mix(in srgb, var(--color-green-500) 33%, transparent);
  }
}

.marker-cluster-medium {
  background-color: color-mix(in srgb, var(--color-yellow-400) 25%, transparent);

  div {
    background-color: color-mix(in srgb, var(--color-yellow-400) 33%, transparent);
  }
}

.marker-cluster-large {
  background-color: color-mix(in srgb, var(--color-rose-400) 25%, transparent);

  div {
    background-color: color-mix(in srgb, var(--color-rose-400) 33%, transparent);
  }
}
</style>
