<template>
    <section class="flex flex-col gap-7 pt-5 w-96">
      <div class="flex flex-col gap-1">
        <FloatLabel>
          <InputText v-model="name" class="w-full" />
          <label>{{ $t('name') }}</label>
        </FloatLabel>
        <small v-if="errors.name">{{ errors.name }}</small>
      </div>
      <div class="w-full flex gap-2 mt-4">
        <Button
          :label="$t('back')"
          outlined
          severity="secondary"
          class="ml-auto"
          @click="dialog.close()"
        />
        <Button
          :label="$t('save')"
          icon="pi pi-save"
          severity="success"
          @click="save()"
          :loading="saving"
        />
      </div>
    </section>
  </template>
  
  <script setup>
  import { useCategoriesStore } from '@/stores/categoreis'
  // import { useUploaderStore } from '@/stores/uploader';
  import { computed, inject, reactive, ref, watch } from 'vue'
  const name = ref('')
  const dialog = inject('dialogRef')
  
  const { toast, t } = inject('service')
  
  const { category } = dialog.value.data
  
  const form = reactive(Object.assign({}, category || {}))
  
  const errors = reactive({})
  
  const file = ref({})
  
  const saving = ref(false)
  
  const store = useCategoriesStore()
  
  const save = async () => {
    saving.value = true
    const { status, data } = await store.create(name)
    console.log('status',status);
    save.value = false

           if (status === 201 || status === 200)
           toast.add({
              life: 2000,
              severity: 'success',
              summary: t('successful'),
              detail: t('دسته بندی جدید ایجاد شد')
          })
          dialog.value.close()

        //       form.headerImage = data.url
        //   else
        //       return toast.add({
        //           life: 2000, severity: 'error', summary: t('error'), detail: data.msg
        //       })
      
}
  //     //Create or Update
  //     const { status, data } =
  //         !!category ? await store.update(category._id, form) : await store.store(form)
  
  //     saving.value = false
  
  //     if (status === 200 || status === 201) {
  //         toast.add({
  //             life: 2000,
  //             severity: 'success',
  //             summary: t('successful'),
  //             detail: t(!!category ? 'updateSuccessfully' : 'storeSuccessfully')
  //         })
  //         dialog.value.close()
  //     } else if (status === 422)
  //         Object.assign(errors, data)
  //     else
  //         toast.add({
  //             severity: 'error', life: 2000, detail: data.msg, summary: t('error')
  //         })
  
  // }
  
  // watch(computed(() => Object.assign({}, form)), (value, old) => {
  //     Object.keys(form).forEach((key) => {
  //         if (value[key] != old[key]) delete errors[key]
  //     })
  // })
  
  // const parentCategoryID = computed({
  //     get: () => form.parentCategoryID ? ({ [form.parentCategoryID]: true }) : null,
  //     set: (v) => form.parentCategoryID = Object.keys(v)[0]
  // })
  </script>
  
  <style lang="scss" scoped></style>