<!-- RecurrentPaymentsList.vue -->
<template>
  <div v-if="loading" class="flex flex-col items-center justify-center h-full bg-gray-100 py-15">
    Loading...
  </div>
  <div v-else class="flex flex-col items-center justify-center h-full bg-gray-100 py-15">
    <!-- Заголовок -->
    <h1 class="text-4xl font-extrabold mb-8 text-gray-800">Recurrent Payments</h1>

    <!-- Список рекуррентных платежей -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4">
      <RecurrentListItem
          v-for="payment in recurrentPayments"
          :key="payment.id"
          :payment="payment"
          @edit-payment="editPayment"
          @delete-payment="deletePayment"
      />
      <div>
        <div
            class="recurrent-card bg-white shadow-lg rounded-lg p-6 w-full transition duration-300 transform hover:scale-105">
          <div class="flex justify-between  items-center">
            <div class="flex items-center w-full justify-center gap-4" style="height: 160px;">

              <Button text class="flex-col" @click="toggleModal">
                <i class="pi pi-plus-circle" style="font-size: 2.5rem"></i>
                <p>Add new</p>
              </Button>
              <CreateRecurrentModal
                  :show="showModal"
                  :expenseCategories="expenseCategories"
                  :incomeCategories="incomeCategories"
                  :categoryTypes="categoryTypes"
                  @save-payment="savePayment"
                  @close-modal="toggleModal"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
// import RecurrentPaymentCard from './RecurrentPaymentCard.vue';
import RecurrentListItem from "@/components/settings/recurrent/RecurrentListItem.vue";
import Button from "primevue/button";
import {RecurrentPayment} from "@/models/Recurrent";
import {getRecurrentPayments} from "@/services/recurrentService";
import CreateRecurrentModal from "@/components/settings/recurrent/CreateRecurrentModal.vue";
import {Category, CategoryType} from "@/models/Category";
import {getCategories, getCategoryTypes} from "@/services/categoryService";

const loading = ref(true);

const showModal = ref(false);

const toggleModal = () => {
  showModal.value = !showModal.value;
}


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
}

const categories = ref<Category[]>([]);
const expenseCategories = ref<Category[]>([]);
const incomeCategories = ref<Category[]>([]);
const categoryTypes = ref<CategoryType[]>([]);
const fetchCategories = async () => {
  loading.value = true
  try {
    const categoriesResponse = await getCategories();
    const categoryTypesResponse = await getCategoryTypes();
    categories.value = categoriesResponse.data
    expenseCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'EXPENSE');
    incomeCategories.value = categoriesResponse.data.filter((category: Category) => category.type.code === 'INCOME');
    categoryTypes.value = categoryTypesResponse.data

  } catch (error) {
    console.error('Error fetching categories:', error);
  }
  loading.value = false
};

const savePayment = async () => {

  // loading.value = true;
  try {
    // await saveRecurrentPayment(payment);
    await fetchRecurrentPayments();
    loading.value = false
  } catch (error) {
    console.error('Error fetching categories:', error);
  }

}


// Обработчики событий
const editPayment = (payment: any) => {
  console.log('Edit payment:', payment);
};

const deletePayment = (payment: any) => {
  console.log('Delete payment:', payment);
};

onMounted(async () => {
  await fetchRecurrentPayments()
  await fetchCategories()
})
</script>

<style scoped>
.grid {
  gap: 2rem;
}

.text-gray-800 {
  color: #1f2937;
}

.bg-gray-100 {
  background-color: #f3f4f6;
}
</style>
