<template>
	<div class="flex flex-col h-full justify-center items-center gap-8 text-4xl md:text-8xl">
		<input
			v-model="usernameInput"
			class="bg-transparent text-white text-6xl text-center font-fat w-full focus:outline-none border-none"
			placeholder="Username"
			maxlength="20"
		/>
		<button
			class="font-bold font-inherit text-inherit text-2xl md:text-4xl border border-solid border-gray-500 rounded<md bg-white bg-opacity-0 transition px-10 py-4 cursor-pointer"
			:class="$style.button"
			:disabled="usernameInput.length <= 0 || usernameInput.length > 20"
			@click="submit()"
		>
			Continue
		</button>
	</div>
</template>

<style module lang="scss">
	.button {
		&:disabled {
			cursor: not-allowed;
		}

    &:not(:disabled):hover {
      --un-bg-opacity: 10%;
    }
	}
</style>

<script setup lang="ts">
	import { ref, watchEffect } from "vue"
	import { useGame } from "../clientGame"
	import { LOBBY_CODE_LENGTH } from "../../shared/constants"
	import { useBrowserLocation } from "@vueuse/core"
	import { useAuth } from "../auth"

	const auth = useAuth()
	const usernameInput = ref("")
	const isLoading = ref(false)

	async function submit() {
		if (isLoading.value) return
		isLoading.value = true
		await auth.login(usernameInput.value)
		window.location.reload() // so that the WebSocket reconnects with the cookie set
		isLoading.value = false
	}
</script>