<script lang="ts" setup>
import { useMap } from '@/stores/map';
import { useParisTokensStore } from '@/stores/parisTokens';
import { useReviewStore } from '@/stores/reviews';
import { storeToRefs } from 'pinia';

const { activeLayers } = storeToRefs(useMap())
const { markers: restaurants } = useReviewStore()
const { markers: tokens } = useParisTokensStore()

function handleTokenClick() {
  activeLayers.value.tokens = !activeLayers.value.tokens
}

function handleFoodClick() {
  activeLayers.value.food = !activeLayers.value.food
}
</script>

<template>
  <aside class="rounded bg-background border border-border shadow-sm">
    <header class="py-1.5 px-2 text-[.8em] font-medium border-b border-border">
      <h2>
        Calques
      </h2>
    </header>
    <menu class="first:pt-0.5 last:pb-0.5">
      <li>
        <button
          class="w-full pl-2 pr-3 py-1.5 text-xs cursor-pointer flex items-start gap-1 hover:bg-foreground/10"
          :class="{
            'text-foreground *:fill-foreground': !activeLayers.food,
            'text-emerald-600 *:fill-emerald-600': activeLayers.food
          }"
          @click="handleFoodClick"
        >
          <svg v-if="activeLayers.food" xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256">
            <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm-34.34,77.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z" />
          </svg>

          <svg v-else xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256">
            <path d="M216,40V224a8,8,0,0,1-16,0V176H152a8,8,0,0,1-8-8,268.75,268.75,0,0,1,7.22-56.88c9.78-40.49,28.32-67.63,53.63-78.47A8,8,0,0,1,216,40Zm-96.11-1.31a8,8,0,1,0-15.78,2.63L111.89,88H88V40a8,8,0,0,0-16,0V88H48.11l7.78-46.68a8,8,0,1,0-15.78-2.63l-8,48A8.17,8.17,0,0,0,32,88a48.07,48.07,0,0,0,40,47.32V224a8,8,0,0,0,16,0V135.32A48.07,48.07,0,0,0,128,88a8.17,8.17,0,0,0-.11-1.31Z" />
          </svg>

          <span>
            Restaurants <small>({{ restaurants.length }})</small>
          </span>
        </button>
      </li>
      <li>
        <button
          class="pl-2 pr-3 py-1.5 text-xs cursor-pointer flex items-start gap-1 hover:bg-foreground/10"
          :class="{
            'text-foreground *:fill-foreground': !activeLayers.tokens,
            'text-emerald-600 *:fill-emerald-600': activeLayers.tokens
          }"
          @click="handleTokenClick"
        >
          <svg v-if="activeLayers.tokens" xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256">
            <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm-34.34,77.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z" />
          </svg>

          <svg v-else xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 256 256">
            <path d="M198.51,56.09C186.44,35.4,169.92,24,152,24H104C86.08,24,69.56,35.4,57.49,56.09,46.21,75.42,40,101,40,128s6.21,52.58,17.49,71.91C69.56,220.6,86.08,232,104,232h48c17.92,0,34.44-11.4,46.51-32.09C209.79,180.58,216,155,216,128S209.79,75.42,198.51,56.09ZM199.79,120h-32a152.78,152.78,0,0,0-9.68-48H188.7C194.82,85.38,198.86,102,199.79,120Zm-20.6-64H150.46a83.13,83.13,0,0,0-12-16H152C162,40,171.4,46,179.19,56ZM152,216H138.49a83.13,83.13,0,0,0,12-16h28.73C171.4,210,162,216,152,216Zm36.7-32H158.12a152.78,152.78,0,0,0,9.68-48h32C198.86,154,194.82,170.62,188.7,184Z" />
          </svg>

          <span>
            Monnaie de Paris <small>({{ tokens.length }})</small>
          </span>
        </button>
      </li>
    </menu>
  </aside>
</template>

<style lang="scss" scoped>
aside {
  position: fixed;
  top: var(--body-padding);
  left: var(--body-padding);
  z-index: 100;
}
</style>
