<template>
  <div class="flex flex-col gap-3 p-3 pt-12">
    <PrimePanel header="Clients" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
      <dl v-for="client in clients" :key="client.socketId" class="">
        <div v-for="(value, key) in client" :key="key" class="py-2">
          <dt class="font-bold">
            {{ key }}
          </dt>
          <dd class="pl-8">
            {{ value }}
          </dd>
        </div>
      </dl>
    </PrimePanel>

    <PrimePanel header="Producers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
      <dl v-for="[_, producer] in Array.from(producers)" :key="producer.id" class="">
        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
          <dt class="font-bold">
            {{ key }}
          </dt>
          <dd class="pl-8">
            {{ producer[key] }}
          </dd>
        </div>
      </dl>
    </PrimePanel>

    <PrimePanel header="Consumers" toggleable collapsed :pt="{ content: { class: 'divide-y divide-surface-800 py-4' } }">
      <dl v-for="[_, consumer] in Array.from(consumers)" :key="consumer.id" class="">
        <div v-for="key in ['id', 'paused']" :key="key" class="py-2">
          <dt class="font-bold">
            {{ key }}
          </dt>
          <dd class="pl-8">
            {{ consumer[key] }}
          </dd>
        </div>
      </dl>
    </PrimePanel>
  </div>

<!--  <div class="flex items-center justify-center p-3"> -->
<!--    <PrimeCard> -->
<!--      <template #subtitle> -->
<!--        Important information -->
<!--      </template> -->

<!--      <template #content> -->
<!--        The chat is under development. -->
<!--      </template> -->
<!--    </PrimeCard> -->
<!--  </div> -->
</template>

<script setup lang="ts">
const { clients } = useClients()
const { producers, consumers } = useMediasoup()

definePageMeta({
})
</script>
