<script setup>
import { toast } from 'bulma-toast'

const router = useRouter()
const activeSave = useActiveSave()

const items = [
  [{
    label: 'Profile',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
    }
  }], [{
    label: 'Edit',
    icon: 'i-heroicons-pencil-square-20-solid',
    shortcuts: ['E'],
    click: () => {
      console.log('Edit')
    }
  }, {
    label: 'Duplicate',
    icon: 'i-heroicons-document-duplicate-20-solid',
    shortcuts: ['D'],
    disabled: true
  }], [{
    label: 'Archive',
    icon: 'i-heroicons-archive-box-20-solid'
  }, {
    label: 'Move',
    icon: 'i-heroicons-arrow-right-circle-20-solid'
  }], [{
    label: 'Delete',
    icon: 'i-heroicons-trash-20-solid',
    shortcuts: ['⌘', 'D']
  }]
]

const openLink = (link) => {
  if(activeSave.value) {
    toast({
      message: 'Save button is active, please submit the data before leaving!',
      type: 'is-warning',
      duration: 2000
    })
  } else {
    router.push(link)
  }
}
</script>

<template>
  <p class="quicklinkheader">
<!--    <UIcon name="i-mdi-arrow-right-thick" />-->
<!--    Quicklink:-->

    <UButton
        icon="i-mdi-plus"
        class="margr"
        size="sm"
        color="primary"
        variant="solid"
        label="Order"
        @click.prevent="openLink('/sales/orders/create')"
        :trailing="false"
    />


    <UButton
        icon="i-mdi-plus"
        class="margr"
        size="sm"
        color="primary"
        variant="solid"
        label="BPartner"
        @click.prevent="openLink('/partners/partners/create')"
        :trailing="false"
    />

    <UButton
        icon="i-mdi-plus"
        class="margr"
        size="sm"
        color="primary"
        variant="solid"
        label="Product"
        @click.prevent="openLink('/materials/products/create')"
        :trailing="false"
    />

<!--    <UDropdown :items="items" :popper="{ placement: 'bottom-start' }">-->
<!--      <UButton color="white" label="Options" trailing-icon="i-heroicons-chevron-down-20-solid" />-->
<!--    </UDropdown>-->

  </p>
</template>

<style >
@ref pointerEvents-none cursor-pointer;

p.quicklinkheader {
    padding: 5px 10px 5px 25px;
}

main nav .nav__wrapper .info__text {
background-color: #e1e1e1;
width: 100%;
color: white !important;
  margin-right:10px;
}

.margr {
  margin-right: 5px;
}
</style>