<script setup lang="ts">

import {useSpaceStore} from "@/stores/spaceStore";
import {useToast} from "primevue/usetoast";
import {Divider} from "primevue";
import {computed, onMounted, ref} from "vue";
import {Category} from "@/models/category";
import {useToolbarStore} from "@/stores/toolbar-store";
import {useRouter} from "vue-router";
import {useCategoriesStore} from "@/stores/categories-store";
import {CategoryType, CategoryTypeName} from "@/models/enums";

const toast = useToast()
const spaceStore = useSpaceStore()
const categoryStore = useCategoriesStore()
const toolbar = useToolbarStore()
const router = useRouter()


const categories = ref<Category[]>([])
const incomeCategories = computed(() => {
  return categories.value.filter(i => i.type == CategoryType.INCOME)
})
const expenseCategories = computed(() => {
  return categories.value.filter(i => i.type == CategoryType.EXPENSE)
})

const fetchData = async () => {
  try {
    if (spaceStore.selectedSpaceId !== undefined) {
      let spaceId = spaceStore.selectedSpaceId!!
      await categoryStore.fetchCategories(spaceId)
      categories.value = categoryStore.categories
    }
  } catch (error: Error) {
    toast.add({
      severity: 'error',
      summary: 'Failed to fetch categories.',
      detail: error.message
    })
  }
}

const toCreation = () => {
  router.push(`/categories/create`)
}

onMounted(async () => {
  await fetchData()
  toolbar.registerHandler('openCategoryCreation', () => {
    toCreation()
  })
})


</script>

<template>

  <div class="flex flex-col w-full !pb-10 gap-6">
    <div class="flex flex-col">
      <span class="!pl-4">Income categories</span>
      <div class="flex card flex-col ">

      <span v-if="incomeCategories.length ==0 ">It looks like you haven't create any income category yet. <router-link
          to="/categories/create" class="!text-blue-400">Try to create some first.</router-link></span>
        <div v-else v-for="key in incomeCategories.keys()"
             :key="incomeCategories[key].id"
             @click="router.push(`/categories/${incomeCategories[key].id}/edit`)"
             class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center font-bold ">
          <div class="flex flex-row  w-full items-center justify-between">
            <div class="flex flex-row items-center gap-2 ">
              <span class="text-3xl"> {{ incomeCategories[key].icon }}</span>
              <div class="flex flex-col !font-bold "> {{ incomeCategories[key].name }}
                <div class="flex flex-row text-sm">{{ incomeCategories[key].description }} |
                  {{ CategoryTypeName[incomeCategories[key].type] }}
                </div>
              </div>
            </div>
            <i class="pi pi-angle-right !font-extralight"/>
          </div>
          <Divider v-if="key+1 !== incomeCategories.length" class="!m-0 !py-3"/>
        </div>
      </div>
    </div>
    <div class="flex flex-col">
      <span class="!pl-4">Expense categories</span>
      <div class="flex card ">

      <span v-if="expenseCategories.length ==0 ">It looks like you haven't create any expense category yet. <router-link
          to="/categories/create" class="!text-blue-400">Try to create some first.</router-link></span>
        <div v-else v-for="key in expenseCategories.keys()"
             :key="expenseCategories[key].id"
             @click="router.push(`/categories/${expenseCategories[key].id}/edit`)"
             class="flex flex-col  w-full gap-0 pl-5  items-start justify-items-center font-bold ">
          <div class="flex flex-row  w-full items-center justify-between">
            <div class="flex flex-row items-center gap-2 ">
              <span class="text-3xl"> {{ expenseCategories[key].icon }}</span>
              <div class="flex flex-col !font-bold "> {{ expenseCategories[key].name }}
                <div class="flex flex-row text-sm">{{ expenseCategories[key].description }} |
                  {{ CategoryTypeName[expenseCategories[key].type] }}
                </div>
              </div>
            </div>
            <i class="pi pi-angle-right !font-extralight"/>
          </div>
          <Divider v-if="key+1 !== expenseCategories.length" class="!m-0 !py-3"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>