<script setup lang="ts">
import {computed, ref} from 'vue';
import LobbyComponent from '../components/lobby/LobbyComponent.vue';
import type {LobbyInfo} from "@/types/GameTypes.ts";
import type {User} from "@/types/GameSubTypes.ts";
import {useIngame} from "@/composables/useIngame.ts";
import {sendEvent} from "@/services/ws.ts";

const ig = useIngame()

const lobbyInfo = computed<LobbyInfo | null>(() => {
  if (ig.state === 'Lobby' && ig.data) {
    return ig.data as LobbyInfo;
  }
  return null;
});

const handleKickPlayer = (user: User) => {
  sendEvent("KickEvent", {
    user: user
  })
};

const handleStartGame = () => {
  //TODO: Implement start game
};

const handleLeaveGame = (user: User) => {
  sendEvent("LeftEvent",{
    user: user
    })
};
</script>

<template>
  <q-layout>
    <q-page-container>
      <q-page class="vh-100 column">
        <lobby-component
          v-if="lobbyInfo"
          :lobbyInfo="lobbyInfo"
          @kick-player="handleKickPlayer"
          @start-game="handleStartGame"
          @leave-game="handleLeaveGame"
        />
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style scoped>

</style>
