<template>
  <div class="grid grid-cols-2 h-screen">
    <div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
      <div
        class="flex items-center justify-between gap-2 border-b-2 border-surface-800 px-3 py-3 bg-surface-950"
        style="height: 75px;"
      >
        <div class="inline-flex items-center gap-3">
          <PrimeBadge v-if="isTauri" class="opacity-50" severity="secondary" :value="version" size="small" />
          <PrimeBadge :severity="connected ? 'success' : 'danger' " />
        </div>

        <PrimeButtonGroup class="ml-auto">
          <PrimeButton outlined @click="toggleInput">
            <template #icon>
              <Component :is="inputMuted ? MicOff : Mic" />
            </template>
          </PrimeButton>
          <PrimeButton outlined @click="toggleOutput">
            <template #icon>
              <Component :is="outputMuted ? VolumeOff : Volume2" />
            </template>
          </PrimeButton>
        </PrimeButtonGroup>
      </div>

      <div v-auto-animate class="p-3 overflow-y-auto flex-1 bg-surface-900 overflow-hidden divide-y divide-surface-800">
        <ClientRow v-for="client of clients" :key="client.id" :client="client" />
      </div>
    </div>

    <div class="bg-surface-950 overflow-y-auto">
      <div
        class="flex items-center justify-center gap-2 border-b-2 border-surface-800 px-3 py-3 bg-surface-900"
        style="height: 75px;"
      >
        <PrimeSelectButton
          v-model="activeTab"
          :options="tabs"
          data-key="id"
          :allow-empty="false"
          style="--p-togglebutton-content-padding: 0.25rem 0.5rem"
        >
          <template #option="{ option }">
            <Component :is="option.icon" size="24" />
          </template>
        </PrimeSelectButton>
      </div>

      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { MessageCircle, Mic, MicOff, Settings, UserPen, Volume2, VolumeOff } from 'lucide-vue-next'

const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri } = useApp()
const { connect, connected } = useSignaling()

interface Tab {
  id: string
  icon: Component
  onClick: () => void | Promise<void>
}

const route = useRoute()

const tabs: Tab[] = [
  {
    id: 'Index',
    icon: MessageCircle,
    onClick: () => {
      navigateTo({ name: 'Index' })
    },
  },
  {
    id: 'Profile',
    icon: UserPen,
    onClick: () => {
      navigateTo({ name: 'Profile' })
    },
  },
  {
    id: 'Preferences',
    icon: Settings,
    onClick: () => {
      navigateTo({ name: 'Preferences' })
    },
  },
]

const activeTab = ref<Tab>(tabs.find(tab => tab.id === route.name) ?? tabs[0]!)

watch(activeTab, (activeTab) => {
  activeTab.onClick()
})

connect()
</script>
