<template>
  <div v-auto-animate class="grid grid-cols-2 h-screen">
    <div class="flex flex-col shadow-xl shadow-surface-950 overflow-y-hidden">
      <AppHeader title="Шальные сиськи 18+">
        <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>

    <slot />
  </div>

  <PrimeBadge class="fixed top-3 right-3" severity="success" />
</template>

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

const route = useRoute()

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

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

connect()
</script>
