<template>
  <form @submit.prevent="submit" class="relative px-6 py-16">
    <div class="flex flex-col gap-5 p-2 mb-8 relative">
      <div class="w-full grid gap-3 relative">
        <input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
        <input class="input-field xs:min-w-[350px] min-w-64" id="email-register" v-model="email" type="email" name="email" placeholder="Email" required />
        <div class="relative">
          <input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
          <button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
        </div>
        <span v-if="formError" class="text-red-200 text-xs -mt-2">{{ formError }}</span>
      </div>
      <button class="btn-cyan xs:w-full" type="submit">Register now</button>

      <!-- Divider shape -->
      <div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
        <div class="w-0.5 h-full bg-gray-300"></div>
        <div class="w-36 h-full bg-gray-300"></div>
        <div class="w-0.5 h-full bg-gray-300"></div>
      </div>
    </div>
    <div class="pt-8">
      <p class="m-0 text-center">Already have an account? <button class="text-cyan-300 text-base p-0" @click.prevent="() => emit('switchToLogin')">Log in</button></p>
    </div>
  </form>
</template>

<script setup lang="ts">
import { socketManager } from '@/managers/SocketManager'
import { login, register } from '@/services/authenticationService'
import { useGameStore } from '@/stores/gameStore'
import { useCookies } from '@vueuse/integrations/useCookies'
import { onMounted, ref } from 'vue'

const emit = defineEmits(['switchToLogin'])

const gameStore = useGameStore()
const username = ref('')
const password = ref('')
const email = ref('')
const formError = ref('')
const showPassword = ref(false)

async function submit() {
  // check if username and password are valid
  if (username.value === '' || email.value === '' || password.value === '') {
    formError.value = 'Please enter a valid username, email, and password'
    return
  }

  if (email.value === '') {
    formError.value = 'Please enter an email'
    return
  }

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

  if (response.success === undefined) {
    formError.value = response.error
    return
  }

  const loginResponse = await login(username.value, password.value)

  if (!loginResponse) {
    formError.value = 'Login after registration failed. Please try logging in manually.'
    return
  }

  socketManager.setToken(loginResponse.token)
  gameStore.initConnection()
}
</script>
