<script setup lang="ts">

import Textarea from "primevue/textarea";
import InputText from "primevue/inputtext";
import Button from "primevue/button";
import FloatLabel from "primevue/floatlabel";
import {WishlistItem} from "@/models/WishList";
import {ref} from "vue";
import InputGroup from "primevue/inputgroup";
import InputNumber from "primevue/inputnumber";
import InputGroupAddon from "primevue/inputgroupaddon";
import {addWishListItemRequest} from "@/services/WishListService";
import {useToast} from "primevue/usetoast";

const toast = useToast()

const props = defineProps({
  wishlistId: String,
  editItem: Object,
})

const emits = defineEmits(["item-created", "creation-cancelled"])
const isEditing = ref(!!props.editItem)
const item = ref(props.editItem ? props.editItem : new WishlistItem())
const inputNameRef = ref()
const inputDescriptionRef = ref()
const inputPriceRef = ref()
const inputLinkRef = ref()

const checkForm = () => {
  console.log(inputNameRef.value)
  if (!item.value.name || item.value.name.length === 0) {
    toast.add({
      severity: 'error',
      summary: 'Ошибка создания желания',
      detail: "Название должно быть введено",
      life: 3000
    })
    return false
  } else if (!item.value.description || item.value.description.length === 0) {
    toast.add({
      severity: 'error',
      summary: 'Ошибка создания желания',
      detail: "Описание должно быть введено",
      life: 3000
    })
    return false
  } else if (!item.value.link || item.value.link.length === 0) {
    toast.add({
      severity: 'error',
      summary: 'Ошибка создания желания',
      detail: "Ссылка должна быть введена",
      life: 3000
    })
    return false
  } else if (!item.value.price || item.value.price == 0) {
    toast.add({
      severity: 'error',
      summary: 'Ошибка создания желания',
      detail: "Цена должна быть введена",
      life: 3000
    })
    return false
  } else return true
}
const itemCreate = async () => {
  if (checkForm()) {
    await addWishListItemRequest(props.wishlistId, item.value)
        .then(res => {
          emits("item-created", res)
          resetForm()
        })
        .catch(err => {
          console.log(err)
          toast.add({
            severity: 'error',
            summary: 'Ошибка создания желания',
            detail: err.response.data.message,
            life: 3000
          })
        })
  }
}
const cancelCreation = () => {
  resetForm()
  emits("creation-cancelled")
}
const resetForm = () => {
  item.value = new WishlistItem()
}

</script>

<template>
  <div class="flex flex-col">
    <div class="flex flex-col gap-4 mt-1">
      <FloatLabel variant="on" class="w-full">
        <label for="name">Название</label>
        <InputText :ref="inputNameRef" v-model="item.name" id="name" class="w-full"/>
      </FloatLabel>
      <FloatLabel variant="on" class="w-full">
        <label for="name">Описание</label>
        <Textarea :ref="inputDescriptionRef" v-model="item.description" id="name" class="w-full"/>
      </FloatLabel>
      <FloatLabel variant="on" class="w-full">
        <label for="name">Ссылка на товар</label>
        <InputText :ref="inputLinkRef" v-model="item.link" id="name" class="w-full"/>
      </FloatLabel>
      <!-- Сумма -->
      <InputGroup class="w-full">
        <InputGroupAddon>₽</InputGroupAddon>
        <InputNumber :ref="inputPriceRef" v-model="item.price" placeholder="Сумма"/>
        <InputGroupAddon>.00</InputGroupAddon>
      </InputGroup>
      <div class="flex flex-row gap-2 justify-end items-center">
        <Button label="Создать" severity="success" icon="pi pi-save" @click="itemCreate"/>
        <Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancelCreation"/>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>