<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useSocketsStore } from '@/stores/sockets.ts'
import AppMenu from '@/components/AppMenu.vue'
import LeftPane from '@/components/LeftPane.vue'
import RightPane from '@/components/RightPane.vue'
import UsersList from '@/components/Users/UsersList.vue'
import SettingsList from '@/components/Settings/SettingsList.vue'
import ChatsList from '@/components/Chats/ChatsList.vue'
import { useMenuStore } from '@/stores/menu.ts'

const socketsStore = useSocketsStore()
const menuStore = useMenuStore()

const component = computed(() => {
  switch (menuStore.selected) {
    case 'chats':
      return ChatsList
    case 'users':
      return UsersList
    case 'settings':
      return SettingsList
    default:
      return ChatsList
  }
})

onMounted(() => {
  socketsStore.init()
})
</script>

<template>
  <div class="flex h-full">
    <div class="flex w-full">
      <AppMenu />
      <LeftPane>
        <component :is="component" />
      </LeftPane>
    </div>
    <RightPane />
  </div>
</template>

<style scoped></style>
