<script setup lang="ts">

import SpeedDial from "primevue/speeddial";
import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
import { onMounted, ref} from "vue";
import {TransactionType} from "@/models/Transaction";
import {CategoryType} from "@/models/Category";
import {useRoute} from "vue-router";

const loading = ref(false);
const drawerOpened = ref(false);
const transactionType = ref<TransactionType>()
const categoryType = ref<CategoryType>()

const route = useRoute()


const openDrawer = (selectedTransactionType = null, selectedCategoryType = null) => {
  if (selectedTransactionType && selectedCategoryType) {
    transactionType.value = selectedTransactionType;
    categoryType.value = selectedCategoryType;
  } else if (selectedTransactionType) {
    transactionType.value = selectedTransactionType;
    categoryType.value = 'EXPENSE'
  }

  drawerOpened.value = true;
}



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

const items = ref([
  {
    label: 'Create instant transaction',
    icon: 'pi pi-pencil',
    command: () => {
      openDrawer('INSTANT')
    }
  },
  {
    label: 'Create planned income',
    icon: 'pi pi-refresh',
    command: () => {
      openDrawer('PLANNED', 'INCOME')
    }
  },
  {
    label: 'Create planned expense',
    icon: 'pi pi-trash',
    command: () => {
      openDrawer('PLANNED', 'EXPENSE')
    }
  }
])

onMounted(() => {
  setTimeout(() => {

    if (route.path == '/transactions/create') {


      openDrawer('INSTANT')

    }
  }, 10)
})

</script>

<template>


  <div v-if="loading">Loding...</div>
  <div v-else>
    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
                           :transaction-type="transactionType"
                           :category-type="categoryType"
                           @close-drawer="closeDrawer()"
    />

    <SpeedDial
        :model="items"
        :radius="120"
        type="quarter"
        direction="up"
        class="lg:flex lg:fixed hidden mb-10 h-fit !items-end me-10"
        :style="{ position: 'fixed', right: 0, bottom: 0 }"
        pt:menuitem="m-2">


    <template #item="{ item, toggleCallback }" >
        <div
              class="flex flex-row items-start gap-2 justify-between right-10 p-2 border  bg-white rounded border-surface-200 dark:border-surface-700 cursor-pointer"
            @click="toggleCallback"> <!-- Установлена минимальная ширина -->

          <span>{{ item.label }}</span>
          <span :class="item.icon"></span>
        </div>
      </template>
    </SpeedDial>
  </div>
</template>

<style scoped>

</style>