<template>
  <!-- @TODO this must be shown over the login screen -->
  <div class="relative max-lg:h-dvh flex flex-row-reverse">
    <ResetPassword :isModalOpen="isPasswordResetFormShown" @close="() => (isPasswordResetFormShown = false)" />
    <div class="lg:bg-gradient-to-l bg-gradient-to-b from-gray-900 to-transparent w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 z-10"></div>
    <div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
    <div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
      <div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
        <!--        <img src="/assets/tlogo.png" class="mb-10 w-52" alt="Noxious logo" />-->
        <div class="relative">
          <img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="" />
          <img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" alt="" />

          <!-- Login Form -->
          <LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />

          <!-- Register Form -->
          <RegisterForm v-if="currentForm === 'register' && !doesUrlHaveToken" @switchToLogin="switchToLogin" />

          <!-- New Password Form -->
          <NewPasswordForm v-if="doesUrlHaveToken" @switchToLogin="switchToLogin" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import LoginForm from '@/components/login/LoginForm.vue'
import NewPasswordForm from '@/components/login/NewPasswordForm.vue'
import RegisterForm from '@/components/login/RegisterForm.vue'
import ResetPassword from '@/components/login/ResetPasswordModal.vue'
import { useGameStore } from '@/stores/gameStore'
import { useCookies } from '@vueuse/integrations/useCookies'
import { onMounted, ref } from 'vue'

const isPasswordResetFormShown = ref(false)
const doesUrlHaveToken = ref(window.location.hash !== '')

const gameStore = useGameStore()
const currentForm = ref('login')

function switchToLogin() {
  currentForm.value = 'login'
  doesUrlHaveToken.value = false
}

// automatic login because of development
onMounted(async () => {
  const token = useCookies().get('token')
  if (token) {
    gameStore.setToken(token)
    gameStore.initConnection()
  }
})
</script>
