<template>
  <v-list-item :lines="lines" :to="{ name: 'StreamDetailView', params: { id: item.id }}" prepend-icon="mdi-video" v-if="item">
    <v-list-item-title>
      {{ item.name }}
    </v-list-item-title>
    <v-list-item-subtitle>
      <StreamPublishCounterChip :count="item.publish_counter" size="x-small" v-if="showCounter" />
      {{ item.id }}
    </v-list-item-subtitle>
  </v-list-item>
</template>

<script setup>
import { computed, defineProps, toRaw } from 'vue'
import { useQuery } from '@tanstack/vue-query'
import { listStreams } from '@/client/client'

const props = defineProps({
  id: Number,
  lines: {
    type: String,
    default: 'one',
  },
  showCounter: {
    type: Boolean,
    default: false,
  },
})

const { data, error} = useQuery({
  queryKey: ['streams'],
  queryFn: listStreams,
  refetchInterval: 1000,
})

const item = computed(() => {
  if (!data) {
    return null
  }

  return toRaw(data.value).find((item) => item.id === props.id)
})

</script>