<template>
   <q-item>
    <q-item-section avatar>
      <q-icon :name="chat.icon" :color="chat.color" size="md"/>
    </q-item-section>
    <q-item-section>
      <q-item-label>
        <div class="row no-wrap items-center justify-between">
          {{ $t(chat.label) }}
          <span class="text-caption text-grey text-no-wrap" v-if="time">
            {{ getDate(time) }}
          </span>
        </div>
      </q-item-label>
      <q-item-label class="text-grey text-caption">
        {{ $t(chat.description) }}
      </q-item-label>
    </q-item-section>
  </q-item>
</template>

<script setup lang="ts">
  import { chatAccess, chatState } from 'utils/chats'
  import { date } from 'quasar' 

  const props = defineProps<{
    access?: 0 | 1 | 2
    state?: 1 | 2 | 3 | 4  
    time?: number
  }>()

  const chat = props.access
    ? chatAccess(props.access)
    : props.state
      ? chatState(props.state)
      : { info: '', icon: '', color: '', label: '', description: '' }

  function getDate (d: number) {
    return new Date(d * 1000).getFullYear() === new Date(Date.now()).getFullYear()
    ? date.formatDate(d * 1000, 'DD MMM')
    : date.formatDate(d * 1000, 'DD MMM YY')
  }

</script>

<style scoped>
</style>
