<template>
<v-tooltip :text="tooltip" location="top">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props" :color="isCurrent?'primary':undefined" variant="text"
           :icon="icon" @click="click"/>
  </template>
</v-tooltip>
</template>

<script setup>
import {computed} from "vue";
import {router} from "@/router/router.js";

const props = defineProps(['icon', 'route', 'tooltip', 'href', 'target'])
const isCurrent = computed(() => router.name === props.route)

function click() {
  if (!props.href && !props.route)
    console.warn('must set href or route in toolbar-button')
  else if (props.href && props.route)
    console.warn('cannot set both rout and href in toolbar-button')
  else if (props.href) {
    if (props.target)
      window.open(props.href, props.target)
    else
      window.location.href = props.href

  }
  else
      // noinspection JSIgnoredPromiseFromCall
    router.push({name: props.route})
}
</script>

<style scoped lang="scss">

</style>