<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';

const accountStore = useAccountStore();
const CurrentAccount = computed(() => accountStore.CurrentAccount);

const accountName = ref("");
const accountOnBudget = ref(true);

function editAccount(e : any) {
    accountStore.EditAccount(CurrentAccount.value?.ID ?? "", accountName.value, accountOnBudget.value);
}

function openEditAccount(e : any) {
    accountName.value = CurrentAccount.value?.Name ?? "";
    accountOnBudget.value = CurrentAccount.value?.OnBudget ?? true;
}
</script>

<template>
    <Modal button-text="Edit Account" @open="openEditAccount" @submit="editAccount">
        <template v-slot:placeholder>✎</template>
        <div class="mt-2 px-7 py-3">
            <Input
                class="border-2"
                type="text"
                v-model="accountName"
                placeholder="Account name"
                required
            />
        </div>
        <div class="mt-2 px-7 py-3">
            <Input
                class="border-2"
                type="checkbox"
                v-model="accountOnBudget"
                required
            />
            <label>On Budget</label>
        </div>
    </Modal>
</template>