<template>
  <div class="bg-gray-300">
    <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full z-10 pointer-events-none"></div>
    <div class="z-20 w-full h-dvh flex items-center justify-between flex-col relative">
      <div class="filler"></div>
      <h1 class="mt-[115px] text-center text-6xl">NEW QUEST</h1>
      <form @submit.prevent="loginFunc">
        <div class="my-[80px] mx-0 w-full flex flex-col gap-[24px]">
          <div class="w-full grid gap-[15px]">
            <div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
              <label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
              <input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
            </div>
            <div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
              <label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="password">Password</label>
              <input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
            </div>
          </div>
          <div class="flex justify-center sm:gap-[15px] gap-[8px]">
            <button class="btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
            <button class="btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
            <button class="btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <audio ref="bgm" id="bgm" src="/assets/music/bgm.mp3" loop autoplay></audio>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { login, register } from '@/services/authentication'
import { useNotificationStore } from '@/stores/notifications'
import { useSocketStore } from '@/stores/socket'
import { useAssetStore } from '@/stores/assets'

const bgm = ref('bgm')
if (bgm.value.paused) {
  addEventListener('click', () => bgm.value.play())
  addEventListener('keydown', () => bgm.value.play())
}

const socket = useSocketStore()
const notifications = useNotificationStore()
const assetStore = useAssetStore()
const username = ref('')
const password = ref('')

// automatic login because of development
onMounted(async () => {
  /**
   * Fetch assets from the server
   */
  if (!await assetStore.fetchAssets()) {
    notifications.addNotification({ message: 'Failed to fetch assets, the server may be offline or in maintenance. Please try again later.' })
  }
})

async function loginFunc() {
  // check if username and password are valid
  if (username.value === '' || password.value === '') {
    notifications.addNotification({ message: 'Please enter a valid username and password' })
    return
  }

  // send login event to server
  const response = await login(username.value, password.value)

  if (response.success === undefined) {
    notifications.addNotification({ message: response.error })
    return
  }

  socket.setToken(response.token)
  await socket.initConnection()
}

async function registerFunc() {
  // check if username and password are valid
  if (username.value === '' || password.value === '') {
    notifications.addNotification({ message: 'Please enter a valid username and password' })
    return
  }

  // send register event to server
  const response = await register(username.value, password.value)

  if (response.success === undefined) {
    notifications.addNotification({ message: response.error })
    return
  }

  socket.setToken(response.token)
  socket.initConnection()
}
</script>
