<script setup lang="ts">
import {useToolbarStore} from '@/stores/toolbar-store'
import {RouterLink} from 'vue-router'
import {Divider} from "primevue";

const toolbar = useToolbarStore()
const keyOf = (b: { id?: string; text?: string }) => b.id ?? b.text ?? crypto.randomUUID()
</script>
<template>
  <nav class="h-12 w-fit flex flex-row items-center gap-2 p-2 bg-white rounded-full sticky top-10 justify-end">
    <component
        v-for="(btn, idx) in toolbar.current"
        :key="btn.id || btn.text || idx"
        :is="btn.to ? RouterLink : 'button'"
        class="flex flex-row gap-2 items-center"
        :title="btn.title || btn.text"
        v-bind="btn.to ? { to: btn.to } : { type: 'button', disabled: btn.disabled }"
        @click="!btn.to && toolbar.invoke(btn.onClickId)"
    >
      <i v-if="btn.icon" :class="btn.icon" class="!p-2" />
      <span v-if="btn.text">{{ btn.text }}</span>
      <Divider v-if="idx + 1 !== toolbar.current.length" class="!m-0" layout="vertical" />
    </component>
  </nav>
</template>