<script setup lang="ts">
import { useThemeStore, getTheme, themes, type Themes } from '@/stores/theme'
import { ThemeSwitcher } from '@/components/theme-switcher'
import { Lucide, type Icon as LucideIcon } from '@/components/ui/lucide'
import { useRoute, useRouter } from 'vue-router'
import { onMounted, computed } from 'vue'
import { Icon } from '@iconify/vue'

const route = useRoute()
const router = useRouter()
const Component = computed(() => getTheme(themeStore.theme).component)

const themeStore = useThemeStore()
const switchTheme = (theme: Themes['name']) => {
  useThemeStore().setTheme(theme)
}

const openInNewTab = (href: string) => {
  window.open(href, '_blank', 'noopener,noreferrer')
}

type SideTab =
  | {
    id: string
    label: string
    iconType: 'lucide'
    icon: LucideIcon
    offsetRem: number
    onClick: () => void
  }
  | {
    id: string
    label: string
    iconType: 'iconify'
    icon: string
    offsetRem: number
    onClick: () => void
  }

const sideTabs: SideTab[] = [
  {
    id: 'privacy-policy',
    label: 'Dasar Privasi',
    iconType: 'lucide',
    icon: 'Shield',
    offsetRem: 3.5,
    onClick: () => {
      const { href } = router.resolve({ name: 'privacy-policy' })
      openInNewTab(href)
    },
  },
  {
    id: 'facebook-page',
    label: 'Facebook',
    iconType: 'iconify',
    icon: 'ci:facebook',
    offsetRem: 7,
    onClick: () => {
      window.open('https://www.facebook.com/p/Rejimen-Askar-Jurutera-DiRaja-100086287161777/', '_blank')
    },
  },
  {
    id: 'feedback-page',
    label: 'Helpdesk',
    iconType: 'lucide',
    icon: 'MessageCircle',
    offsetRem: 10.5,
    onClick: () => {
      window.open('https://docs.google.com/forms/d/e/1FAIpQLSd_0p-kKmsHq9z4fZ3e6X13V6O64s1-CpJw4_vR768Gg0_sA/viewform?usp=header', '_blank')
    },
  },
]

onMounted(() => {
  const theme = route.query.theme as Themes['name']
  if (route.query.theme !== undefined && themes.map((theme) => theme.name).includes(theme)) {
    switchTheme(theme)
  }
})
</script>

<template>
  <div>
    <ThemeSwitcher />

    <button v-for="tab in sideTabs" :key="tab.id" type="button" :aria-label="tab.label" :style="{
      top: `calc(50% + ${tab.offsetRem}rem)`,
      ['--color' as any]: '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="
      (event: MouseEvent) => {
        event.preventDefault()
        tab.onClick()
      }
    ">
      <span class="relative z-10 flex items-center gap-2 px-5">
        <Lucide v-if="tab.iconType === 'lucide'" :icon="tab.icon" />
        <Icon v-else :icon="tab.icon" class="size-4" />
        <span :class="[
          'whitespace-nowrap text-sm',
          'max-w-0 overflow-hidden transition-[max-width] duration-200 ease-out',
          'group-hover:max-w-40',
        ]">
          {{ tab.label }}
        </span>
      </span>
    </button>

    <Component />
  </div>
</template>
