<script lang="ts">
import Card from '../components/Card.vue';
import { defineComponent } from "vue";
import { NEW_BUDGET } from "../store/action-types";

export default defineComponent({
  data() {
    return {
      dialog: false,
      budgetName: ""
    }
  },
  components: { Card },
  methods: {
    saveBudget() {
      this.$store.dispatch(NEW_BUDGET, this.$data.budgetName);
      this.$data.dialog = false;
    },
    newBudget() {
      this.$data.dialog = true;
    }
  }
})
</script>

<template>
  <Card>
    <p class="w-24 text-center text-6xl">+</p>
    <button class="text-lg" dark @click="newBudget">New Budget</button>
  </Card>
  <div v-if="dialog" justify="center">
    <div>
      <div>
        <span class="text-h5">New Budget</span>
      </div>
      <div>
        <input type="text" v-model="budgetName" label="Budget name" required />
      </div>
      <div>
        <button @click="dialog = false">Close</button>
        <button @click="saveBudget">Save</button>
      </div>
    </div>
  </div>
</template>