<template>
  <v-list-item :value="transactionItem.id">
    <template v-slot:prepend>
      <v-avatar color="grey-lighten-1">
        <v-icon color="white">mdi-folder</v-icon>
      </v-avatar>
    </template>
    <v-list-item-title>
      {{transactionItem.category?.name}}
    </v-list-item-title>
    <v-list-item-subtitle>
      {{formatDateTime}} &middot; {{transactionItem.description}}
    </v-list-item-subtitle>
    <template v-slot:append>
      <v-list-item-action class="flex-column align-end">
        <span v-html="formatAmountString"></span>
      </v-list-item-action>
    </template>
  </v-list-item>
</template>

<script lang="ts" setup>
import {Transaction} from "@/models/transaction.ts"
import {computed } from 'vue'
import * as dayjs from 'dayjs'
import {CurrencyTypeToSymbol} from "@/utils/currency"
const props = defineProps<{
  transactionItem: Transaction;
}>();
const formatDateTime = computed(() => {
  let parsed = dayjs.unix(Number(props.transactionItem.time))
  return parsed.format("HH:mm")
})
const formatAmountString = computed(() => {
  return CurrencyTypeToSymbol(props.transactionItem.amount.currency)+props.transactionItem.amount.val||"0.00"
})
</script>
