<script setup lang="ts">
import {onMounted, ref} from "vue";
import {createSpaceRequest} from "@/services/spaceService";
import {Space} from "@/models/Space";
import Dialog from "primevue/dialog";
import FloatLabel from "primevue/floatlabel";
import Checkbox from "primevue/checkbox";
import InputText from "primevue/inputtext";
import Textarea from "primevue/textarea";
import Button from "primevue/button";
import DatePicker from "primevue/datepicker";

const emits = defineEmits(['space-created', 'close-modal', 'error-space-creation'])
const props = defineProps({
  opened: {
    type: Boolean,
    required: true
  }
})

const spaceName = ref('')
const spaceDescription = ref('')

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

const createSpace = async () => {
  const space = new Space()
  space.name = spaceName.value
  space.description = spaceDescription.value
  try {
    await createSpaceRequest(space)
    resetForm()
    emits("space-created")
  } catch (e) {
    console.error(e)
    emits('error-space-creation', e)
  }
}
const resetForm = () => {
  spaceName.value = ''
  spaceDescription.value = ''
}

</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="spaceName" id="name" class="w-full"/>
      </FloatLabel>
      <FloatLabel variant="on" class="w-full">
        <label for="name">Описание</label>
        <Textarea v-model="spaceDescription" id="name" class="w-full"/>
      </FloatLabel>
      <div class="flex flex-row gap-2 justify-end items-center">
        <Button label="Создать" severity="success" icon="pi pi-save" @click="createSpace"/>
        <Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancel"/>
      </div>
    </div>
  </Dialog>
</template>

<style scoped>

</style>