<script setup lang="ts">
import Dialog from "primevue/dialog";
import Checkbox from "primevue/checkbox";
import Button from "primevue/button";
import InputText from "primevue/inputtext";
import FloatLabel from "primevue/floatlabel";
import DatePicker from "primevue/datepicker";
import {onMounted, ref} from "vue";
import {getMonthName} from "@/utils/utils";
import {Budget} from "@/models/Budget";

const props = defineProps({
  opened: {
    type: Boolean,
    required: true
  }
})
const emits = defineEmits(['budget-created','close-modal'])
const createRecurrentPayments = ref<Boolean>(true)

const name = ref('')
const dateFrom = ref(new Date())
const dateTo = ref(new Date())

const budget = ref(new Budget())

const create = async () => {

  try {
    emits("budget-created", budget.value, createRecurrentPayments.value);
  } catch (e) {
    console.error(e)
    throw e
  }

}

const cancel = () => {
  emits("close-modal");
}

const resetForm = () => {
  budget.value.name = ''
  budget.value.dateTo = new Date();
  budget.value.dateFrom = new Date();
  budget.value.dateFrom.setDate(10)
  if (budget.value.dateFrom.getMonth() == 11) {
    budget.value.dateFrom.setMonth(0)
  } else {
    budget.value.dateFrom.setMonth(dateFrom.value.getMonth() + 1)
  }
  budget.value.dateTo.setDate(9)
  if (budget.value.dateTo.getMonth() == 10) {
    budget.value.dateTo.setMonth(0)
    budget.value.dateTo.setYear(dateTo.value.getFullYear() + 1)
  } else {
    budget.value.dateTo.setMonth(budget.value.dateTo.getMonth() + 2)
  }
  budget.value.name = getMonthName(budget.value.dateFrom.getMonth()) + ' ' + budget.value.dateFrom.getFullYear();
}

onMounted(() => {
  resetForm()
})

</script>

<template>
  <Dialog :visible="opened" modal header="Создать новый бюджет" :style="{ width: '25rem' }" @hide="cancel" @update:visible="cancel">
    <div class="flex flex-col gap-4 mt-1">
      <FloatLabel variant="on" class="w-full">
        <label for="name">Название</label>
        <InputText v-model="budget.name" id="name" class="w-full"/>
      </FloatLabel>
      <div class="flex flex-row gap-4">
        <FloatLabel variant="on">
          <label for="dateFrom">Дата начала</label>
          <DatePicker v-model="budget.dateFrom" id="dateFrom" dateFormat="dd.mm.yy"/>
        </FloatLabel>
        <FloatLabel variant="on">
          <label for="dateTo">Дата завершения</label>
          <DatePicker v-model="budget.dateTo" id="dateTo" dateFormat="dd.mm.yy"/>
        </FloatLabel>
      </div>
      <div class="flex flex-row items-center min-w-fit gap-4">
        <Checkbox v-model="createRecurrentPayments" binary/>
        Создать ежемесячные платежи?
      </div>
      <div class="flex flex-row gap-2 justify-end items-center">
        <Button label="Создать" severity="success" icon="pi pi-save" @click="create"/>
        <Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancel"/>
      </div>
    </div>
  </Dialog>

</template>

<style scoped>

</style>