<template>
  <div v-if="!loadingUser && !loading" class="card  ">
    <Menubar :model="items">
      <template #start>
        <!--        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">-->
        <!--          <path-->
        <!--              d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"-->
        <!--              fill="var(&#45;&#45;p-primary-color)"-->
        <!--          />-->
        <!--          <path-->
        <!--              d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"-->
        <!--              fill="var(&#45;&#45;p-text-color)"-->
        <!--          />-->
        <!--        </svg>-->
        <img alt="logo" src="/apple-touch-icon.png" width="32" height="32"/>
      </template>
      <template #item="{ item, props, hasSubmenu, root }">
        <router-link :to="item.url" v-ripple class="flex items-center" v-bind="props.action">
          <span :class="item.icon"/>
          <span class="ml-2">{{ item.label }}</span>
          <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge"/>


          <span v-if="item.shortcut"
                class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{
              item.shortcut
            }}</span>
          <i v-if="hasSubmenu"
             :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
        </router-link>

      </template>
<!--      <Button-->
<!--          @click="drawerStore.setCategoryType('EXPENSE');drawerStore.setTransactionType('INSTANT');drawerStore.visible = true"-->
<!--          label="Создать"/>-->

      <template #end>
        <div class="flex items-center gap-2">
          <Select v-model="spaceStore.space" :options="spaces" optionLabel="name" @change="selectSpace"/>
          <div class="relative flex flex-col items-center group">
            <!-- Имя пользователя -->
            <div class="flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
              <span class="text-white text-center">{{ user.firstName.substring(0, 1) }}</span>
            </div>

            <!-- Всплывающая плашка с ID -->
            <div
                class="absolute bottom-[-3rem] right-0 w-fit  bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
                @click="copyToClipboard(user.id)"
            >
              ID: {{ user.id }}
              Имя: {{ user.firstName }}
            </div>

            <!-- Сообщение "Скопировано" -->
            <div v-if="copied" class="absolute bottom-[-60px] bg-green-500 text-white text-xs px-2 py-1 rounded transition-opacity">
              Скопировано!
            </div>
          </div>

          <button @click="logout" class="text-xs">Выйти</button>
          <!--          <InputText placeholder="Search" type="text" class="w-32 sm:w-auto" />-->
          <!--          <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />-->
        </div>
      </template>
    </Menubar>
  </div>

</template>

<script setup lang="ts">
import {computed, onMounted, ref, watch} from "vue";
import Badge from "primevue/badge";
import Button from "primevue/button"
import Menubar from "primevue/menubar";
import Select from "primevue/select";
import {useUserStore} from "@/stores/userStore";
import {useDrawerStore} from "@/stores/drawerStore.ts";
import {getSpaces} from "@/services/spaceService.ts";
import {Space} from "@/models/Space.ts";
import router from "@/router";
import {useRoute} from "vue-router";
import {EventBus} from "@/utils/EventBus";
import {useSpaceStore} from "@/stores/spaceStore";

const route = useRoute();

const loading = ref(false);

const userStore = useUserStore()
const user = computed(() => userStore.user);
const loadingUser = computed(() => userStore.loadingUser);

const drawerStore = useDrawerStore()
const visible = computed(() => drawerStore.visible);

const spaceStore = useSpaceStore()
const spaces = computed(() => spaceStore.spaces);
const selectedSpace = computed(() => spaceStore.space)


const selectSpace = (space: Space) => {
  spaceStore.setSpace(space.value);
}

const copied = ref(false);

const copyToClipboard = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    copied.value = true;
    setTimeout(() => copied.value = false, 1500); // Убираем сообщение через 1.5 сек
  } catch (err) {
    console.error('Ошибка копирования:', err);
  }
};

const logout = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("spaceId");
  userStore.user = null;
  router.push("/login/?back=" + route.path);
}

const items = ref([
  {
    label: 'Главная',
    icon: 'pi pi-home',
    url: '/'
  },
  {
    label: 'Пространства',
    icon: 'pi pi-compass',
    url: '/spaces'
  },
  {
    label: 'Аналитика',
    icon: 'pi pi-star',
    url: '/analytics'
  },
  {
    label: 'Бюджеты',
    icon: 'pi pi-briefcase',
    url: '/budgets'
  },
  {
    label: 'Транзакции',
    icon: "pi pi-star",
    url: '/transactions'
  },
  {
    label: 'Настройки',
    icon: 'pi pi-envelope',
    url: '/settings',
  },
  {
    label: 'Создать',
    icon: 'pi pi-plus',
    url:route.path,
    command: () => {
      drawerStore.setCategoryType('EXPENSE');
      drawerStore.setTransactionType('INSTANT');
      drawerStore.visible = true
    }
  }
]);


onMounted(async () => {
  loading.value = true;

  loading.value = false
})
</script>
