<template>
  <div class="grid grid-cols-2 h-screen">
    <div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
      <AppHeader title="Надарики">
        <template #right>
          <PrimeButtonGroup class="ml-auto">
            <PrimeButton
              icon="pi pi-microphone" size="large" :severity="inputMuted ? 'contrast' : 'secondary'"
              :outlined="!inputMuted" @click="toggleInput"
            />
            <PrimeButton
              icon="pi pi-headphones" size="large" :severity="outputMuted ? 'contrast' : 'secondary'"
              :outlined="!outputMuted" @click="toggleOutput"
            />
          </PrimeButtonGroup>

          <PrimeButton icon="pi pi-cog" size="large" :text="!inPreferences" :severity="inPreferences ? 'contrast' : 'secondary'" @click="onClickPreferences" />
        </template>
      </AppHeader>

      <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="overflow-y-auto">
      <slot />
    </div>
  </div>

  <div class="fixed top-3 right-3 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>
</template>

<script setup lang="ts">
const { clients, inputMuted, toggleInput, outputMuted, toggleOutput, version, isTauri } = useApp()
const { connect, connected } = useSignaling()

const route = useRoute()

const inPreferences = computed(() => {
  return route.name === 'Preferences'
})

function onClickPreferences() {
  navigateTo(!inPreferences.value ? { name: 'Preferences' } : '/')
}

connect()
</script>
