<template>
  <div class="mx-auto w-full max-w-xl flex-col items-center">
    <p class="mb-10 mt-52 text-sm sm:text-base">
      Je bent momenteel niet verbonden met Minecraft. Om toegang te krijgen tot de Minecraft server moet je in Minecraft naar de
      server met het ip <UBadge>play.polarcraft.xeovalyte.com</UBadge> gaan. Vervolgens krijg je een code
      te zien, vul deze code hieronder in.
    </p>
    <div class="flex justify-center gap-x-3">
      <UInput v-model="code" placeholder="6 digit code" class="" />
      <UButton :disabled="disableButtons" @click="connectMinecraft">Submit</UButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
const user = useState('user')

const code = ref('')
const disableButtons = ref(false)

const connectMinecraft = async () => {
  disableButtons.value = true

  try {
    const response = await $fetch('/api/users/@me/minecraft', {
      method: 'PUT',
      body: {
        code: code.value
      }
    })

    user.value.minecraft = response

    useToast().add({ title: 'Successfully connected Minecraft', color: 'green' })
  } catch (e: any) {
    console.error(e)

    useToast().add({ title: e.statusMessage, color: 'red' })
  }

  disableButtons.value = false
}
</script>
