<template>
  <Notifications />
  <Login v-if="screen === 'login'" />
  <Register v-if="screen === 'register'" />
  <Characters v-if="screen === 'characters'" />
  <Game v-if="screen === 'game'" />
</template>

<script setup lang="ts">
import { type Ref, ref } from 'vue'
import { useSocketStore } from '@/stores/socket'
import Notifications from '@/components/utilities/Notifications.vue'
import Login from '@/components/screens/Login.vue'
import Register from '@/components/screens/Register.vue'
import Characters from '@/components/screens/Characters.vue'
import Game from '@/components/Game.vue'

const screen: Ref<string> = ref('login')
const socket = useSocketStore()

socket.$subscribe(
  (mutation, state) => {
    if (!state.connection) {
      screen.value = 'login'
    }

    if (state.connection) {
      screen.value = 'characters'

      if (state.character) {
        screen.value = 'game'
      }
    }
  },
  { detached: true }
)
</script>
