<template>
  <div class="flex app-titlebar">
    <Menubar class="w-full h-14 rounded-none bg-zinc-900 justify-between text-muted-foreground font-mono px-3">
      <div v-if="isMacOS" :style="{width: 80 / zoomFactor + 'px'}" />
      <div class="flex items-center">
        <h1
          class="text-2xl min-w-32 app-titlebar-button text-zinc-100"
          @click="$refs.zerooneTitle.scramble(1,100,0); $refs.zerooneSubtitle.scramble(1,75,30)">
          <ScrambleText
            ref="zerooneTitle"
            text=" ZERO/ONE" scramble-on-mount :scramble-amount="1" :fill-interval="100"
            :replace-interval="100"
          />
        </h1>
        <h2 class="text-sm min-w-[188px] text-muted-foreground font-mono">
          ::
          <ScrambleText
            ref="zerooneSubtitle"
            text="Haptics Configurator" scramble-on-mount :scramble-amount="1" :fill-interval="35"
            :replace-interval="40" />
        </h2>
      </div>
      <div class="h-8 px-2">
        <Separator orientation="vertical" />
      </div>
      <div class="flex gap-2">
        <MenubarMenu>
          <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button" />
          <MenubarContent>
            <!-- TODO: Switch keyboard shortcut icons based on platform -->
            <MenubarItem>
              {{ $t('navbar.device.disconnect') }}
              <MenubarShortcut>⌘D</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>{{ $t('navbar.device.export') }}
              <MenubarShortcut>⌘E</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>{{ $t('navbar.device.import') }}
              <MenubarShortcut>⌘I</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem>{{ $t('navbar.device.quit') }}
              <MenubarShortcut>⌘Q</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
        <MenubarButton class="app-titlebar-button" @click="electron?.openExternal('https://discord.gg/jgRd77YN5T')">
          Community
        </MenubarButton>
        <MenubarMenu>
          <MenubarTrigger class="app-titlebar-button">Help</MenubarTrigger>
          <MenubarContent>
            <!-- TODO: Switch keyboard shortcut icons based on platform -->
            <MenubarItem>
              {{ $t('navbar.device.disconnect') }}
              <MenubarShortcut>⌘D</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>{{ $t('navbar.device.export') }}
              <MenubarShortcut>⌘E</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>{{ $t('navbar.device.import') }}
              <MenubarShortcut>⌘I</MenubarShortcut>
            </MenubarItem>
            <MenubarSeparator />
            <MenubarItem>{{ $t('navbar.device.quit') }}
              <MenubarShortcut>⌘Q</MenubarShortcut>
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      </div>
      <div class="grow" />
      <MenubarButton
        class="app-titlebar-button border-2"
        @click="store.setConnected(!store.connected)">
        {{ store.connected ? 'Disconnect' : 'Connect' }}
      </MenubarButton>
      <div v-if="!isMacOS" class="flex h-full">
        <button
          v-if="minimizable"
          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
          @click="electron?.minimizeWindow">
          <Minus class="h-5 w-5" />
        </button>
        <button
          v-if="maximizable"
          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
          @click="electron?.toggleMaximizeWindow">
          <Square class="h-3.5 w-3.5 mr-0.5" />
        </button>
        <button
          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
          @click="electron?.closeWindow">
          <X class="h-5 w-5 mr-0.5" />
        </button>
      </div>
    </Menubar>
  </div>
</template>
<script setup>
import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from '@/components/ui/menubar'
import ScrambleText from '@/components/common/ScrambleText.vue'
import { Minus, Square, X } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { Separator } from '@/components/ui/separator'
import { useStore } from '@/store'
import MenubarButton from '@/components/navbar/MenubarButton.vue'

const store = useStore()

const minimizable = ref(true)
const maximizable = ref(false)

const { electron } = window

const isMacOS = electron?.platform === 'darwin'
const zoomFactor = ref(1)

onMounted(() => {
  window.addEventListener('resize', () => {
    zoomFactor.value = window.outerWidth / window.innerWidth
  })
})

</script>
<style scoped>
.app-titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

.app-titlebar-button {
  -webkit-app-region: no-drag;
}
</style>