<template>
  <div class="card flex justify-center h-fit">
    <DrawerForm v-if="isDesktop" :visible="visible" :isEditing="isEditing" @close-drawer="closeDrawer" >
      <template #default>
        <TransactionFormContent :transaction="props.transaction" :transaction-type="transactionType" :category-type="categoryType" :categoryId="categoryId" @close-drawer="closeDrawer"   @create-transaction="transactionUpdated('create')"
                                @delete-transaction="transactionUpdated" @transaction-updated="transactionUpdated" />
      </template>
    </DrawerForm>

    <PopUp v-else :header="'Создать транзакцию'" @close-popup="closeDrawer">
      <template #default>
        <TransactionFormContent :transaction="props.transaction" :transaction-type="transactionType" :category-type="categoryType" :categoryId="categoryId" @close-drawer="closeDrawer" @create-transaction="transactionUpdated"
        @delete-transaction="transactionUpdated" @transaction-updated="transactionUpdated" />
      </template>
    </PopUp>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import DrawerForm from "@/components/DrawerForm.vue";
import PopUp from "@/components/PopUp.vue";
import TransactionFormContent from "@/components/transactions/TransactionFormContent.vue";
import {Transaction} from "@/models/Transaction";


const props = defineProps({
  transaction: {
    type: Object as Transaction,
    required: false
  },
  transactionType: String,
  categoryType: String,
  categoryId: String,
})

const isDesktop = ref(window.innerWidth >= 1024);
const visible = ref(true); // Устанавливаем true или false для показа/скрытия
const isEditing = ref(false); // Определяем, редактирование или создание транзакции

const emit = defineEmits([ 'close-drawer', 'transaction-updated']);


// Обновляем `isDesktop` при изменении размера экрана
function updateIsDesktop() {
  isDesktop.value = window.innerWidth >= 1024;
}

onMounted(() => {
  window.addEventListener('resize', updateIsDesktop);
});

const closeDrawer = () => {

  visible.value = false;
  emit('close-drawer');
};

const transactionUpdated = (text) => {

  emit("transaction-updated");
}

</script>
