<template>
  <div class="q-pa-lg flex flex-center" style="gap: 24px;">
    <q-card
      class="q-pa-lg shadow-3"
      style="width: 400px; max-width: 90vw; border-radius: 16px;"
    >
      <q-card-section class="text-center">
        <q-icon name="home" size="48px" color="primary" />
        <div class="text-h6 q-mt-md">Local</div>
      </q-card-section>

      <q-card-actions align="center">
        <q-btn
          label="Go!"
          color="primary"
          @click="CreateGame(true)"
          rounded
          unelevated
          size="lg"
          class="full-width"
        />
      </q-card-actions>
    </q-card>

    <q-card
      class="q-pa-lg shadow-3"
      style="width: 400px; max-width: 90vw; border-radius: 16px;"
    >
      <q-card-section class="text-center">
        <q-icon name="public" size="48px" color="primary" />
        <div class="text-h6 q-mt-md">Online</div>
      </q-card-section>

      <q-card-actions align="center">
        <q-btn
          label="Go!"
          color="primary"
          @click="CreateGame(false)"
          rounded
          unelevated
          size="lg"
          class="full-width"
        />
      </q-card-actions>
    </q-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useQuasar, LocalStorage } from "quasar";
import { api } from 'src/boot/axios';

const $q = useQuasar();
const router = useRouter()
const user = ref({ username:"", id:0 });

const storedUser = LocalStorage.getItem("user")
if (storedUser) {
  console.log(storedUser)
  user.value = storedUser
} else {
  router.push("/user/username")
}

async function CreateGame(is_local) {
  console.log(user.value)
  api.post("/api/games", {
    user: user.value.id,
    is_local: is_local
  })

  .then(function (response) {
    console.log(response)

    LocalStorage.setItem("gameID", response.data.game.id)

    if (is_local) {
      router.push("/game/local/create")
    } else {
      router.push("/game/online/create")
    }

    $q.notify({
      type: "positive",
      message: `Success!`,
    });
  })

  .catch(function (error) {
    console.log(error);

    $q.notify({
      type: "negative",
      message: error.response.data.error,
    });
  })
}

</script>
