import { Component } from 'vue-property-decorator';
import Vue from 'vue';
import { DateFormat } from '@constants/utils/format-date';
import { TasksService } from '@/services/task-service';
import { convertDateFormat } from '@utils/format-date';
import {
  noEmptyValueRule,
  validPhoneNumberRule,
  validEmailRule,
} from '@utils/field-validation/basic';
import { notifyError, notifySuccess } from '@utils/notify';

@Component({
  methods: {
    noEmptyValueRule,
    validPhoneNumberRule,
    validEmailRule,
  },
})
export default class ReportDialog extends Vue {
  dialogVisible = false;

  form = {
    issueDate: convertDateFormat(new Date(), '', DateFormat.date),
    topic: '',
    descriptioninRTF: '',
    clientEmail: this.currentUser?.email,
    clientPhone: '',
    text: '',
  };

  get currentUser() {
    return this.$store.getters['oidcClient/currentUser'];
  }

  show() {
    this.dialogVisible = true;
  }

  async onClickSend() {
    try {
      const isValid = await (this.$refs.form as any).validate();
      if (isValid) {
        this.$q.loading.show();
        const tasksApi = await TasksService.handler({ useAuth: true });
        await tasksApi.createTask({
          metaClass: 'serviceCall$NewInc',
          impact: 'impact$7203',
          topic: this.form.topic,
          description: this.form.topic,
          clientLogin: this.currentUser.sub,
          clientName: this.currentUser.name,
          clientEmail: this.form.clientEmail,
          clientPhone: this.form.clientPhone,
          errorMessage: this.form.text,
        });
        this.dialogVisible = false;
        notifySuccess(this.$tc('reportDialog.messageSuccess'), 'done');
        this.$set(this, 'form', {
          issueDate: convertDateFormat(new Date(), '', DateFormat.date),
          topic: '',
          descriptioninRTF: '',
          clientEmail: this.currentUser.email,
          clientPhone: '',
          text: '',
        });
      }
    } catch (e) {
      console.error(e);
      notifyError(e.message.toString());
    } finally {
      this.$q.loading.hide();
    }
  }
}
