<template>
  <div class="telecart-dock fixed bottom-0 w-full z-50 px-10">
    <div
        class="telecart-dock-inner flex justify-around items-center bg-base-300/10 h-full backdrop-blur-md border-base-300/90 border">
      <RouterLink
          :to="{name: 'home'}"
          :class="{'active': route.name === 'home'}"
          class="telecart-dock-item"
          @click="onDockItemClick"
      >
        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt">
            <polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10"
                      stroke-width="2"></polyline>
            <path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor"
                  stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
            <line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square"
                  stroke-miterlimit="10" stroke-width="2"></line>
          </g>
        </svg>
        <span class="dock-label">Главная</span>
      </RouterLink>

      <RouterLink
          :to="{name: 'search'}"
          :class="{'active': route.name === 'search'}"
          class="telecart-dock-item"
          @click="onDockItemClick"
      >
        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
             stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
        </svg>
        <span class="dock-label">Поиск</span>
      </RouterLink>

      <RouterLink
          v-if="settings.store_enabled"
          :to="{name: 'cart'}"
          :class="{'active': route.name === 'cart'}"
          class="telecart-dock-item"
          @click="onDockItemClick"
      >
        <div class="indicator">
          <span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
          <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
               stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round"
                  d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
          </svg>
        </div>
        <span class="dock-label">Корзина</span>
      </RouterLink>
    </div>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {useCartStore} from "@/stores/CartStore.js";
import {useSettingsStore} from "@/stores/SettingsStore.js";

const route = useRoute();
const cart = useCartStore();
const settings = useSettingsStore();
const haptic = window.Telegram.WebApp.HapticFeedback;

function onDockItemClick() {
  haptic.selectionChanged();
}
</script>

<style scoped>
.telecart-dock {
  padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 5px);
  height: calc(70px + var(--tg-safe-area-inset-bottom, 0px));
}

.telecart-dock-inner {
  border-radius: var(--radius-field);
  border-width: var(--border);
  border-style: solid;
}

.telecart-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--radius-field);
  padding: 5px 13px;
  min-width: 90px;
}

.telecart-dock-item.active {
  background-color: var(--color-primary);
  backdrop-filter: blur(var(--blur-sm));
  color: var(--color-primary-content);
}
</style>