<script setup lang="ts">
import { Transaction } from '@/models/transaction';
import dayjs from 'dayjs';
import { formatAmount } from '@/utils/utils';
import { useRouter } from 'vue-router';
import Divider from 'primevue/divider';

const router = useRouter();

const props = defineProps<{
  transactions: Transaction[];
}>();



const formatDate = (date: string | Date) => {
  return dayjs(date).format('MMM D');
};

const formatCurrency = (amount: number) => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
  }).format(amount);
};

const getAmountColor = (type: string) => {
  return type === 'INCOME' ? '!text-green-600 !dark:text-green-400' : '!text-red-600 !dark:text-red-400';
};
</script>

<template>
  <div class="flex flex-col gap-1">
    <div class="flex flex-row justify-between items-end px-2">
      <span class="text-xl !font-semibold ">Recent transactions</span>
      <router-link to="/transactions" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">View
        all</router-link>
    </div>
    <div class="flex card">
      <span v-if="transactions.length == 0">Looks like you haven't record any transaction yet.<router-link
          to="/transactions/create" class="!text-blue-400">Try to create some.</router-link></span>
      <div v-else v-for="key in transactions.keys()" :key="transactions[key].id"
        @click="router.push(`/transactions/${transactions[key].id}/edit`)"
        class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center font-bold ">
        <div class="flex flex-row  w-full items-center justify-between">
          <div class="flex flex-row items-center gap-2 ">
            <span v-if="transactions[key].category" class="text-3xl"> {{
              transactions[key].category.icon
              }}</span>
            <i v-else class="pi pi-question !text-3xl" />
            <div class="flex flex-col !font-bold "> {{ transactions[key].comment }}
              <div v-if="transactions[key].category" class="flex flex-row text-sm">
                {{ transactions[key].category.name }}
              </div>
            </div>
          </div>
          <div class="flex flex-row gap-2 items-center">
            <div class="flex flex-col justify-between items-end !w-fit whitespace-nowrap shrink-0">
              <span class="text-lg !font-bold ">{{ formatAmount(transactions[key].amount) }} ₽</span>
              <span class="text-sm !font-extralight"> {{ formatDate(transactions[key].date) }}</span>
            </div>
            <i class="pi pi-angle-right !font-extralight" />
          </div>
        </div>
        <Divider v-if="key + 1 !== transactions.length" class="!m-0 !py-3" />
      </div>
    </div>
  </div>

</template>
