<script setup lang="ts">
import { Lucide } from '@/components/ui/lucide'
import { useRouter } from 'vue-router'

const props = withDefaults(
  defineProps<{
    /** Vertical offset from vertical center, in rem (matches Layout side tabs). */
    offsetRem?: number
    /** Open feedback form in a new tab instead of navigating in place. */
    openInNewTab?: boolean
  }>(),
  {
    offsetRem: 3.5,
    openInNewTab: true,
  },
)

const router = useRouter()

function openHelpdesk(event: MouseEvent) {
  event.preventDefault()

  const { href } = router.resolve({ name: 'feedback-submit' })

  if (props.openInNewTab) {
    window.open(href, '_blank', 'noopener,noreferrer')
    return
  }

  router.push({ name: 'feedback-submit' })
}
</script>

<template>
  <button type="button" aria-label="Helpdesk" :style="{
    top: `calc(50% + ${offsetRem}rem)`,
    ['--color' as string]: 'var(--color-primary)',
  }" :class="[
    'group fixed right-0 z-50 flex h-12 cursor-pointer items-center overflow-hidden rounded-l-full border border-(--color)/50 bg-background/80 shadow-lg transition-all',
    'w-14 hover:w-44',
    'before:absolute before:inset-0 before:bg-(--color)/20',
  ]" @click="openHelpdesk">
    <span class="relative z-10 flex items-center gap-2 px-5">
      <Lucide icon="MessageCircle" />
      <span :class="[
        'whitespace-nowrap text-sm',
        'max-w-0 overflow-hidden transition-[max-width] duration-200 ease-out',
        'group-hover:max-w-40',
      ]">
        Maklum Balas
      </span>
    </span>
  </button>
</template>
