stepperObj.goFirst();

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { hideModal } from "@/core/helpers/dom";
import { StepperComponent } from "@/assets/ts/components/_StepperComponent";
import Swal from "sweetalert2/dist/sweetalert2.min.js";
import { useForm } from "vee-validate";
import { Field, ErrorMessage } from "vee-validate";
import * as Yup from "yup";
import firebase from "firebase/app";

interface Step1 {
 horario: string;
}

interface Step2 {
 tratamiento: any;
 numeroCaso: string;
 leadtime: string;
 prioridad: any;
}

interface Step3 {
 doctorName: string;
 region: string;
}

interface OtrosDatos {
 created_at: any;
 finalizado: boolean;
 end_at: any;
 lead: string;
 status: {
 label: string;
 state: string;
 };
}

interface KTCreateApp extends Step1, Step2, Step3, OtrosDatos {}

export default defineComponent({
 name: "create-account-modal",
 components: {
 Field,
 ErrorMessage,
 },
 setup() {
 const addCustomerModalRef = ref<null | HTMLElement>(null);
 const _stepperObj = ref<StepperComponent | null>(null);
 const createAccountRef = ref<HTMLElement | null>(null);
 const currentStepIndex = ref(0);

 const formInitData = ref({
 horario: "",
 tratamiento: null,
 numeroCaso: "",
 leadtime: "",
 prioridad: "normal",
 doctorName: "",
 region: "",
 created_at: Date.now(),
 finalizado: false,
 end_at: null,
 lead: "",
 status: {
 label: "Proceso",
 state: "success",
 },
 });

 const formData = ref<KTCreateApp>({
 horario: "regular",
 tratamiento: {
 label: "CR",
 state: "primary",
 CR: true,
 SPARK10: false,
 SPARK20: false,
 ADVANCE: false,
 REF: false,
 KIDS: false,
 },
 numeroCaso: "",
 leadtime: "",
 prioridad: {
 label: "NORMAL",
 state: "success",
 },
 doctorName: "",
 region: "",
 created_at: Date.now(),
 finalizado: false,
 end_at: null,
 lead: "",
 status: {
 label: "Proceso",
 state: "success",
 },
 });
 const NORMAL = {
 label: "NORMAL",
 state: "success",
 };
 const RISK = {
 label: "RISK",
 state: "warning",
 };
 const PASSDUE = {
 label: "PASS-DUE",
 state: "danger",
 };
 const CR = {
 label: "CR",
 state: "primary",
 CR: true,
 SPARK10: false,
 SPARK20: false,
 ADVANCE: false,
 REF: false,
 KIDS: false,
 };
 const SPARK10 = {
 label: "SPARK10",
 state: "primary",
 CR: false,
 SPARK10: true,
 SPARK20: false,
 ADVANCE: false,
 REF: false,
 KIDS: false,
 };
 const SPARK20 = {
 label: "SPARK20",
 state: "primary",
 CR: false,
 SPARK10: false,
 SPARK20: true,
 ADVANCE: false,
 REF: false,
 KIDS: false,
 };
 const ADVANCE = {
 label: "ADVANCE",
 state: "primary",
 CR: false,
 SPARK10: false,
 SPARK20: false,
 ADVANCE: true,
 REF: false,
 KIDS: false,
 };
 const REF = {
 label: "REF",
 state: "primary",
 CR: false,
 SPARK10: false,
 SPARK20: false,
 ADVANCE: false,
 REF: true,
 KIDS: false,
 };
 const KIDS = {
 label: "KIDS",
 state: "primary",
 CR: false,
 SPARK10: false,
 SPARK20: false,
 ADVANCE: false,
 REF: false,
 KIDS: true,
 };

 onMounted(() => {
 _stepperObj.value = StepperComponent.createInsance(
 addCustomerModalRef.value as HTMLElement
 );
 });

 const createAppSchema = [
 Yup.object({}),
 Yup.object({
 numeroCaso: Yup.string().required().label("Numero de Caso"),
 leadtime: Yup.string().required().label("Leadtime"),
 }),
 Yup.object({
 doctorName: Yup.string().required().label("El nombre del Doctor"),
 region: Yup.string().required().label("La region es requerida"),
 }),
 Yup.object({}),
 ];

 // extracts the individual step schema
 const currentSchema = computed(() => {
 return createAppSchema[currentStepIndex.value];
 });

 const totalSteps = computed(() => {
 if (!_stepperObj.value) {
 return;
 }

 return _stepperObj.value.totatStepsNumber;
 });

 const { resetForm, handleSubmit } = useForm<
 Step1 | Step2 | Step3 | OtrosDatos
 >({
 validationSchema: currentSchema,
 });

 const previousStep = () => {
 if (!_stepperObj.value) {
 return;
 }

 currentStepIndex.value--;

 _stepperObj.value.goPrev();
 };

 const handleStep = handleSubmit((values) => {
 for (const item in values) {
 // eslint-disable-next-line no-prototype-builtins
 if (values.hasOwnProperty(item)) {
 if (values[item]) {
 formData.value[item] = values[item];
 }
 }
 }

 currentStepIndex.value++;

 if (!_stepperObj.value) {
 return;
 }

 _stepperObj.value.goNext();
 });

 const formSubmit = async () => {
 try {
 await firebase
 .firestore()
 .collection("Spark")
 .doc("Datos")
 .collection("Usuarios")
 .add(formData.value);

 Swal.fire({
 text: "Su consulta fue enviada con exito",
 icon: "success",
 buttonsStyling: false,
 confirmButtonText: "Cerrar",
 customClass: {
 confirmButton: "btn fw-bold btn-light-primary",
 },
 }).then(() => {
 formData.value = formInitData.value;
 addCustomerModalRef.value as HTMLElement;
 hideModal(addCustomerModalRef.value);

 if (!_stepperObj.value) {
 // pasa el wizard al paso 1
 return;
 }
 _stepperObj.value.goFirst(); // pasa el wizard al paso 1
 });
 } catch (error) {
 Swal.fire({
 text: "Upps, ha ocurrido un error al intentar guardar los datos, porfavor revisa tu conexion a internet he intenta de nuevo.",
 icon: "error",
 buttonsStyling: false,
 confirmButtonText: "Cerrar",
 customClass: {
 confirmButton: "btn fw-bold btn-light-danger",
 },
 });
 // console.error(error);
 }
 };

 resetForm({
 values: {
 ...formData.value,
 },
 });

 return {
 createAccountRef,
 totalSteps,
 previousStep,
 handleStep,
 formSubmit,
 currentStepIndex,
 formData,
 NORMAL,
 RISK,
 PASSDUE,
 CR,
 SPARK10,
 SPARK20,
 ADVANCE,
 REF,
 KIDS,
 console,
 addCustomerModalRef,
 resetForm,
 formInitData,
 };
 },
});
</script>