<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-items-end  justify-end">
    <component
        v-for="btnKey in toolbar.current.keys()"
        :is="toolbar.current[btnKey].to ? RouterLink : 'button'"
        :key="btnKey"
        class="flex flex-row gap-2 items-center "
        :title="toolbar.current[btnKey].title || toolbar.current[btnKey].text"
        v-bind="toolbar.current[btnKey].to ? { to: toolbar.current[btnKey].to } : { type: 'button', disabled: toolbar.current[btnKey].disabled }"
        @click="!toolbar.current[btnKey].to && toolbar.invoke(toolbar.current[btnKey].onClickId)"
    >
      <i v-if="toolbar.current[btnKey].icon" :class="toolbar.current[btnKey].icon"  class="!p-2"/>
      <span v-if="toolbar.current[btnKey].text">{{ toolbar.current[btnKey].text }}</span>
      <Divider v-if="btnKey+1 != toolbar.current.length" class="!m-0" layout="vertical"/>
    </component>
  </nav>


</template>