import { type Ref, computed, defineComponent, inject, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useVuelidate } from '@vuelidate/core';

import RegistrationService from './registration.service';
import useDataUtils from '@/shared/data/data-utils.service';
import { useDateFormat, useValidation } from '@/shared/composables';
import { useAlertService } from '@/shared/alert/alert.service';

import UserService from '@/entities/user/user.service';
import EventService from '@/entities/event/event.service';
import { type IEvent } from '@/shared/model/event.model';
import { type IRegistration, Registration } from '@/shared/model/registration.model';

export default defineComponent({
  compatConfig: { MODE: 3 },
  name: 'RegistrationUpdate',
  setup() {
    const registrationService = inject('registrationService', () => new RegistrationService());
    const alertService = inject('alertService', () => useAlertService(), true);

    const registration: Ref<IRegistration> = ref(new Registration());
    const userService = inject('userService', () => new UserService());
    const users: Ref<Array<any>> = ref([]);

    const eventService = inject('eventService', () => new EventService());

    const events: Ref<IEvent[]> = ref([]);
    const isSaving = ref(false);
    const currentLanguage = inject('currentLanguage', () => computed(() => navigator.language ?? 'en'), true);

    const route = useRoute();
    const router = useRouter();

    const previousState = () => router.go(-1);

    const retrieveRegistration = async registrationId => {
      try {
        const res = await registrationService().find(registrationId);
        res.dateTime = new Date(res.dateTime);
        registration.value = res;
      } catch (error) {
        alertService.showHttpError(error.response);
      }
    };

    if (route.params?.registrationId) {
      retrieveRegistration(route.params.registrationId);
    }

    const initRelationships = () => {
      userService()
        .retrieve()
        .then(res => {
          users.value = res.data;
        });
      eventService()
        .retrieve()
        .then(res => {
          events.value = res.data;
        });
    };

    initRelationships();

    const dataUtils = useDataUtils();

    const validations = useValidation();
    const validationRules = {
      dateTime: {
        required: validations.required('This field is required.'),
      },
      active: {
        required: validations.required('This field is required.'),
      },
      playerName: {},
      comment: {},
      user: {},
      event: {},
    };
    const v$ = useVuelidate(validationRules, registration as any);
    v$.value.$validate();

    return {
      registrationService,
      alertService,
      registration,
      previousState,
      isSaving,
      currentLanguage,
      users,
      events,
      ...dataUtils,
      v$,
      ...useDateFormat({ entityRef: registration }),
    };
  },
  created(): void {},
  methods: {
    save(): void {
      this.isSaving = true;
      if (this.registration.id) {
        this.registrationService()
          .update(this.registration)
          .then(param => {
            this.isSaving = false;
            this.previousState();
            this.alertService.showInfo(`A Registration is updated with identifier ${param.id}`);
          })
          .catch(error => {
            this.isSaving = false;
            this.alertService.showHttpError(error.response);
          });
      } else {
        this.registrationService()
          .create(this.registration)
          .then(param => {
            this.isSaving = false;
            this.previousState();
            this.alertService.showSuccess(`A Registration is created with identifier ${param.id}`);
          })
          .catch(error => {
            this.isSaving = false;
            this.alertService.showHttpError(error.response);
          });
      }
    },
  },
});