<script setup lang="ts">

import Button from "primevue/button";
import {RecurrentPayment} from "@/models/Recurrent";
import {onMounted, ref} from "vue";
import {getRecurrentPayments} from "@/services/recurrentService";

const loading = ref(true);

const recurrentPayments = ref<RecurrentPayment[]>([]);
const fetchRecurrentPayments = async () => {
  loading.value = true;
  try {
    console.log('loaded')
    const result = await getRecurrentPayments();
    recurrentPayments.value = result.data;
  } catch (error) {
    console.error('Error fetching recurrent payments:', error);
  }
  loading.value = false
}

onMounted(async () => {
  await fetchRecurrentPayments()
})

</script>

<template>
  <div v-if="loading" class="flex flex-row mt-40">
    Loading...
  </div>
  <div v-else class="">
    <div class="flex flex-col mt-40 bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
      <div class="flex flex-row items-center min-w-fit  justify-between">
        <p class="text-2xl font-bold">Recurrent operations</p>
        <router-link to="/settings/recurrents">
          <Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
        </router-link>
      </div>
      <div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">
        <div v-for="recurrent in recurrentPayments"
             class="flex rounded-xl border-2 bg-white shadow-xl min-w-fit  max-h-fit gap-5 flex-row items-center justify-between w-full p-2">


          <div class="flex flex-row  items-center p-x-4 gap-4">
            <p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ recurrent.category.icon }}</p>
            <div class="flex flex-col items-start justify-items-start w-full">
              <p class="font-bold">{{ recurrent.name }}</p>
              <p class="font-light">{{ recurrent.description }}</p>
            </div>
          </div>
          <div class="flex flex-col items-center p-x-4 justify-items-end text-end ">
            <p :class="recurrent.category.type.code == 'EXPENSE' ? 'text-red-400' : 'text-green-400' " class=" font-bold">- {{ recurrent.amount }} руб.</p>
            <p class="text-end"> {{ recurrent.atDay }} числа</p>
            <!--            <Button icon="pi pi-pen-to-square" rounded @click="openEdit"/>-->
            <!--            <Button icon="pi pi-trash" severity="danger" rounded @click="deleteCategory"/>-->
          </div>
        </div>

      </div>


    </div>
  </div>
</template>

<style scoped>

</style>