<script lang="ts" setup>
import { computed, ref } from 'vue';
import Modal from '../components/Modal.vue';
import { useAccountStore } from '../stores/budget-account';
import Input from '../components/Input.vue';
import Checkbox from '../components/Checkbox.vue';
import { useRouter } from 'vue-router';
import { useBudgetsStore } from '../stores/budget';

const router = useRouter();
const categoryStore = null;

const categoryName = ref("");
const error = ref("");

function createCategory(e : {cancel:boolean}) : boolean {
    error.value = "";
//    categoryStore.CreateCategory(CurrentAccount.value?.ID ?? "", accountName.value, accountOnBudget.value, accountOpen.value);

    return true;
}

</script>

<template>
  <Modal
    button-text="Create Category"
    @submit="createCategory"
  >
    <template #placeholder>
      <span class="ml-2">+</span>
    </template>
    <div class="mt-2 px-7 py-3">
      <Input
        v-model="categoryName"
        class="border-2 dark:border-gray-700"
        type="text"
        placeholder="Category name"
        required
      />
    </div>
    <div
      v-if="error != ''"
      class="dark:text-red-300 text-red-700"
    >
      {{ error }}
    </div>
  </Modal>
</template>
