<template>
  <h2 style="color: #e17958">{{ titulo }}</h2>
  <v-card class="px-0 mx-auto" elevation="0">
    <v-form
      ref="form"
      align-center
      v-model="formValid"
      @submit="submit"
      @update:modelValue="formValidChanged"
    >
      <slot name="header"> </slot>
      <slot></slot>
      <v-row class="d-flex justify-end my-4">
        <slot name="append"></slot>
        <v-btn
          class="mx-0"
          color="#769fdb"
          size="large"
          @click="emit('cancelar', id, modelValue)"
        >
          <template v-slot:prepend>
            <v-icon color="white" class="ml-1 mr-n2">mdi-cancel</v-icon>
          </template>
          <span style="color: #fff">Cancelar</span>
        </v-btn>
        <v-btn class="mx-4" color="#769fdb" size="large" type="submit">
          <template v-slot:prepend>
            <v-icon color="white" class="ml-1 mr-n2"
              >mdi-content-save-outline</v-icon
            >
          </template>
          <span style="color: #fff">Salvar</span>
        </v-btn>
      </v-row>
    </v-form>
  </v-card>
</template>
<script setup lang="ts">
import { useForm, useSubmitForm } from "vee-validate";
import { usePush } from "notivue";
import { useAxios } from "../../composables/useAxios";
import { ref } from "vue";

const push = usePush();
const { $axios } = useAxios();

const props = defineProps({
  modelValue: {
    type: Object
  },
  id: {
    type: Number || String
  },
  resourceUrl: {
    type: String,
    default: ""
  },
  titulo: {
    type: String,
    default: ""
  },
  subTitulo: {
    type: String,
    default: ""
  },
  submit: {
    type: Function
  }
});
const formValid = ref(false);
const emit = defineEmits<{
  (e: "cancelar", id: number, item: any): void;
  (e: "visualizeItem", id: number, item: any): void;
  (e: "deleteItem", id: number, item: any): void;
  (e: "changeDataState", id: number, item: any): void;
  (e: "dataLoaded", response: Response): void;
  (e: "onSubmit", model: any): void;
}>();

const form = ref<any>(null);

const loading = ref(false);
const { errors, handleSubmit, resetForm } = useForm({});

const validate = async () => {
  return await form?.value?.validate();
};

const formValidChanged = function(valid: boolean) {
  if (valid === false) {
    push.warning("Verifique o preenchimento do formulário!");
  }
};

const submit = handleSubmit(async values => {
  try {
    loading.value = true;

    var { valid } = await validate();
    if (valid) {
      if (!!props.submit) {
        await props.submit(props.modelValue);
      } else {
        const result = !props.id
          ? await $axios.post(props.resourceUrl, props.modelValue)
          : await $axios.put(props.resourceUrl, props.modelValue);
      }
    } else {
      push.warning("Verifique o preenchimento do formulário!");
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
});

const reset = () => {
  resetForm();
};

const resetValidation = () => {
  form?.value?.resetValidation();
};

defineExpose({ reset, resetValidation });
</script>
