<script setup lang="ts">

import Button from "primevue/button";
import Checkbox from "primevue/checkbox";
import {computed, onMounted, PropType, ref} from "vue";
import {Transaction} from "@/models/Transaction";
import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
import {Category, CategoryType} from "@/models/Category";
import {getCategories, getCategoryTypes} from "@/services/categoryService";
import {updateTransactionRequest} from "@/services/transactionService";
import {formatAmount, formatDate} from "@/utils/utils";


const props = defineProps(
    {
      transaction: {
        type: Object as PropType<Transaction>,
        required: true,
      }
    }
)
const emits = defineEmits(['open-drawer'])


const setIsDoneTrue = async () => {
  setTimeout(async () => {
    await updateTransactionRequest(props.transaction)
  }, 10);
  // showedTransaction.value.isDone = !showedTransaction.value.isDone;


}

const drawerOpened = ref(false)
const toggleDrawer = () => {
  if (drawerOpened.value) {
    drawerOpened.value = false;
  }
  drawerOpened.value = !drawerOpened.value
  emits('open-drawer', props.transaction)
}

const isPlanned = computed(() => {
  return props.transaction?.transactionType.code === "PLANNED"
})


const entireCategories = ref<Category[]>([])
const expenseCategories = ref<Category[]>([])
const incomeCategories = ref<Category[]>([])
const fetchCategories = async () => {
  try {
    const response = await getCategories();
    entireCategories.value = response.data
    expenseCategories.value = response.data.filter((category: Category) => category.type.code === 'EXPENSE');
    incomeCategories.value = response.data.filter((category: Category) => category.type.code === 'INCOME');
  } catch (error) {
    console.error('Error fetching categories:', error);
  }
}


const categoryTypes = ref<CategoryType[]>([]);
const selectedCategoryType = ref<CategoryType | null>(null);
const fetchCategoryTypes = async () => {

  try {
    const response = await getCategoryTypes();
    categoryTypes.value = response.data;
    selectedCategoryType.value = categoryTypes.value.find((category: CategoryType) => category.code === 'EXPENSE');
  } catch (error) {
    console.error('Error fetching category types:', error);
  }
};

const closeDrawer = () => {
  drawerOpened.value = false;
}


onMounted(async () => {
  // await fetchCategories();
  // await fetchCategoryTypes()
})

</script>

<template>
  <div :class="transaction.category.type.code == 'INCOME' ? 'from-green-100 to-green-50' : ' from-red-100 to-red-50' &&
          transaction.transactionType.code == 'INSTANT' ? ' bg-gradient-to-r shadow-lg  border-2 gap-5 p-2 rounded-xl '  : 'border-b pb-2'
"
       class="flex  bg-white  min-w-fit  max-h-fit flex-row items-center  gap-4 w-full ">
    <div>
      <p v-if="transaction.transactionType.code=='INSTANT'"
         class="text-6xl font-bold text-gray-700 dark:text-gray-400">
        {{ transaction.category.icon }}</p>
      <Checkbox v-model="transaction.isDone" v-else-if="transaction.transactionType.code=='PLANNED'"
                :binary="true"
                @click="setIsDoneTrue"/>
    </div>
    <button class="flex flex-row  items-center p-x-4  justify-between w-full " @click="toggleDrawer">

      <div class="flex flex-col items-start justify-items-start">
        <p :class="transaction.isDone && isPlanned ? 'line-through' : ''" class="font-bold">{{
            transaction.comment
          }}</p>
        <p :class="transaction.isDone && isPlanned ? 'line-through' : ''" class="font-light">{{
            transaction.category.name
          }} |
          {{ formatDate(transaction.date) }}</p>
      </div>
      <div
          :class="transaction.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700' &&  transaction.isDone  && isPlanned ? 'line-through' : ''"
          class="text-2xl font-bold line-clamp-1 ">

        {{ formatAmount(transaction.amount) }} ₽


      </div>

    </button>
    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened" :expenseCategories="expenseCategories"
                           :incomeCategories="incomeCategories" :transaction="transaction"
                           :category-types="categoryTypes"

                           @close-drawer="closeDrawer()"
    />
  </div>
</template>

<style scoped>

</style>