<template>
  <div
      class=" items-center  toolbar-example justify-between bg-white outline rounded-xl outline-gray-300 shadow-lg h-fit fixed"
      style="width: 90%; left:5%; bottom: 1.5rem;">
    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"


                           :transaction-type="transactionType"
                           :category-type="categoryType"

                           @close-drawer="closeDrawer()"
    />
    <div class="flex flex-row rounded-full px-2 justify-between overflow-x">
      <div class="flex flex-col gap-2 p-2">
        <router-link to="/budgets" class="items-center flex flex-col gap-2">
          <i class="pi pi-briefcase text-2xl" style="font-size: 1.5rem"></i>
          <p>Бюджеты</p>
        </router-link>
      </div>
      <div class="flex flex-col gap-2 p-2">
        <router-link to="/transactions" class="items-center flex flex-col gap-2">
          <i class="pi pi-wallet text-2xl" style="font-size: 1.5rem"></i>
          <p>Транзакции</p>
        </router-link>
      </div>
      <div class=" flex-col gap-2 p-2 hidden sm:flex">
        <router-link to="/settings" class="items-center flex flex-col gap-2">
          <i class="pi pi-check text-2xl" style="font-size: 1.5rem"></i>
          <p>Настройки</p>
        </router-link>
      </div>

      <!-- Создать с подменю -->
      <div class="relative  flex-col gap-2 p-2 items-center hidden sm:flex" @click="showSubmenu = !showSubmenu"
           @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">
        <!--        <router-link to="/transactions/create" class="items-center flex flex-col gap-2">-->
        <i class="pi pi-cog text-2xl" style="font-size: 1.5rem"></i>
        <p>Создать</p>
        <!--        </router-link>-->

        <!-- Подменю для Создать -->
        <div v-if="showSubmenu" class="absolute bottom-full right-0 mb-2 w-48 p-2 bg-white shadow-lg rounded-lg z-50">
          <div class="flex flex-col gap-2 items-start">
            <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">
              <p>Создать текущую</p>
            </button>
            <button @click="openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">
              <p> Создать плановый расход</p>
            </button>
            <button @click=" openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">
              Создать плановое поступление
            </button>
          </div>
        </div>
      </div>
      <div class="relative  flex-col gap-2 p-2 items-center flex sm:hidden" @click="showSubmenu = !showSubmenu"
           @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">
        <!--        <router-link to="/transactions/create" class="items-center flex flex-col gap-2">-->
        <i class="pi pi-bars text-2xl" style="font-size: 1.5rem"></i>
        <p>Меню</p>
        <!--        </router-link>-->

        <!-- Подменю для Создать -->
        <div v-if="showSubmenu" class="absolute bottom-full  right-0 mb-2 w-48 p-2 bg-white shadow-lg rounded-lg z-50">
          <div class="flex flex-col-reverse gap-2 items-start">
            <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">
              <p>Создать текущую</p>
            </button>
            <button @click="openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">
              <p class="text-left"> Создать плановый расход</p>
            </button>
            <button @click=" openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">
              <p class="text-left">Создать плановое поступление</p>
            </button>
            <router-link to="/settings" class="items-center flex flex-col gap-2 p-2">
              <!--              <i class="pi pi-check text-2xl" style="font-size: 1.5rem"></i>-->
              <p>Настройки</p>
            </router-link>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import Button from 'primevue/button';
import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
import {TransactionType} from "@/models/Transaction";
import {CategoryType} from "@/models/Category";
import {useRoute} from "vue-router";

const showSubmenu = ref(false);

const route = useRoute()

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


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')
    }
  }
])

const onEditClick = () => {
  console.log("Edit button clicked");
};

const onAddClick = () => {
  console.log("Add button clicked");
};

onMounted(() => {
  setTimeout(() => {
    console.log(route.params['mode']);
    if (route.params['mode']) {
      console.log(route.params['mode']);

      openDrawer('INSTANT')

    }
  }, 10)
})
</script>

<style scoped>
.toolbar-example {
  //margin: 20px;
}

h3 {
  margin: 0;
}
</style>
