<script setup lang="ts">
import type { ReviewMarker } from '@/models/Markers';
import { LMarker, LPopup, LIcon } from '@vue-leaflet/vue-leaflet'
import type { PointTuple } from 'leaflet';
import { computed, ref } from 'vue';
import { cn } from '@/lib/cn';

const props = defineProps<{
  marker: ReviewMarker
}>()

const normalIconSize: PointTuple = [38, 38]
const tinyIconSize: PointTuple = [28, 28]

const iconSize = ref<PointTuple>(props.marker.closed ? tinyIconSize : normalIconSize)
const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
const popupOffset = [0, iconSize.value[0] * -0.66]
</script>

<template>
  <LMarker :lat-lng="marker.coords">
    <LPopup :options="{ offset: popupOffset, maxWidth: 380, minWidth: 180 }">
      <div class="spacing">
        <h2 class="font-bold text-[1.2em] leading-5">
          {{ marker.title }}
        </h2>

        <p v-html="marker.reviews?.[0]!!.text" />
      </div>
    </LPopup>

    <LIcon
      :icon-size
      :icon-anchor
      :class-name="cn(
        { 'grayscale': marker.closed }
      )"
    >
      <img v-if="marker.closed" src="/map/icons/ghost.svg" />

      <template v-else>
        <img v-if="marker.type === 'bar'" src="/map/icons/bar.svg" />
        <img v-else-if="marker.type === 'bakery'" src="/map/icons/bakery.svg" />
        <img v-else-if="marker.type === 'tea-shop'" src="/map/icons/tea-shop.svg" />
        <img v-else-if="marker.type === 'coffee-shop'" src="/map/icons/coffee-shop.svg" />
        <img v-else-if="marker.type === 'ice-cream'" src="/map/icons/ice-cream.svg" />
        <img v-else-if="marker.type === 'food-truck'" src="/map/icons/truck.svg" />

        <template v-else-if="marker.type === 'restaurant'">
          <img v-if="marker.food === 'asian'" src="/map/icons/asian.svg" />
          <img v-else-if="marker.food === 'burgers'" src="/map/icons/burgers.svg" />
          <!-- <img v-else-if="marker.food === 'creperie'" src="/map/icons/creperie.svg" /> -->
          <!-- <img v-else-if="marker.food === 'eastern'" src="/map/icons/eastern.svg" /> -->
          <img v-else-if="marker.food === 'fast-food'" src="/map/icons/fast-food.svg" />
          <img v-else-if="marker.food === 'italian'" src="/map/icons/italian.svg" />
          <img v-else-if="marker.food === 'seafood'" src="/map/icons/seafood.svg" />
          <!-- <img v-else-if="marker.food === 'street-food'" src="/map/icons/street-food.svg" /> -->
          <img v-else-if="marker.food === 'vegetarian'" src="/map/icons/vegetarian.svg" />
          <img v-else src="/map/icons/restaurant.svg" />
        </template>
      </template>

      <div
        class="absolute -top-2 -right-2 size-5 text-center grid place-items-center rounded-full text-[0.65rem] font-bold tracking-[-0.075em]"
        :class="cn(
          {
            'text-white bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
            'text-black bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
            'text-black bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
            'text-black bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
            'text-black bg-sky-400': marker.reviews?.[0]!.grade! >= 4.5,
          },
          marker.type === 'food-truck' && {
            'bg-red-600': marker.reviews?.[0]!.grade! <= 1.5,
            'bg-amber-500': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
            'bg-lime-500': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
            'bg-green-500': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
            'bg-sky-400': marker.reviews?.[0]!.grade! >= 4.5,
          }
        )"
      >
        {{ marker.reviews?.[0]!.grade }}
      </div>

      <div
        class="absolute -z-10 -inset-0.5 rounded-full"
        :class="cn(
          {
            'bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
            'bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
            'bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
            'bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
            'bg-sky-400': marker.reviews?.[0]!.grade! >= 4.5,
            'bg-slate-800': marker.type === 'food-truck'
          },
          marker.type === 'food-truck' && {
            'border-2 border-red-700': marker.reviews?.[0]!.grade! <= 1.5,
            'border-2 border-amber-600': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
            'border-2 border-lime-600': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
            'border-2 border-green-600': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
            'border-2 border-sky-500': marker.reviews?.[0]!.grade! >= 4.5,
          }
        )"
        />
    </LIcon>
  </LMarker>
</template>
