import Vue from 'vue';
import axios from 'axios';

import formMixin from '@mixins/formMixin';

const vm = new Vue({
  components: {
    BaseAlert: () => import(/* webpackChunkName: "BaseAlert" */ '@elements/BaseAlert/index.vue'),
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    TheHeader: () => import(/* webpackChunkName: "TheHeader" */ '@components/TheHeader/index.vue'),
  },
  mixins: [formMixin],
  data() {
    return {
      isLoading: true,
      btnSubmitLoading: false,
      disableForm: false,
      alert: {},
      back: '',
      pagseguroAbandoned: '',
      initialDate: null,
      finalDate: null
    };
  },
  mounted() {
    this.isLoading = false;
  },
  methods: {
    setData({ back, pagseguroAbandoned }) {
      this.back = back;
      this.pagseguroAbandoned = pagseguroAbandoned;
    },
    formartDate(date) {
      const day = ('0' + date.getDate()).slice(-2);
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const year = date.getFullYear();

      return day + '/' + month + '/' + year;
    },
    onInitialDate(value) {
      this.initialDate = value;
      if (value) {
        const [day, month, year] = value.split('/');
        const date = new Date(year + '-' + month + '-' + day);
        const finalDate = new Date(date.getTime() + 5 * 24 * 3600 * 1000);
        this.finalDate = this.formartDate(finalDate);
      } else {
        this.finalDate = '';
      }
    },
    disabledInitialDate(date) {
      const disabledInitialDate = new Date(date.getTime() + 6 * 24 * 3600 * 1000);
      return disabledInitialDate > new Date(new Date().setHours(0, 0, 0, 0));
    },
    disabledFinalDate(date) {
      const disabledFinalDate = new Date(date.getTime() + 1 * 24 * 3600 * 1000);
      return disabledFinalDate > new Date(new Date().setHours(0, 0, 0, 0));
    },
    onSubmit() {
      const form = this.$refs.form;
      const url = form.action;
      const formData = new FormData(form);

      this.btnSubmitLoading = true;
      this.disableForm = true;

      axios({
        method: 'post',
        url,
        data: formData,
      }).then(({ data }) => {
        if (data.warning) {
          this.alert = {
            type: 'error',
            message: data.warning
          };
          this.btnSubmitLoading = false;
          this.disableForm = false;
        }

        if (data.errors) {
          this.$refs.validationObserver.setErrors(data.errors);
          this.btnSubmitLoading = false;
          this.disableForm = false;
        }

        if (data.success) {
          axios({
            method: 'post',
            url: this.pagseguroAbandoned,
            data: formData,
          }).then(() => {
            this.alert = {
              type: 'success',
              message: data.success
            };

            this.btnSubmitLoading = false;
            this.disableForm = false;
          });
        }

      });
    },
  },
});

if (document.readyState === 'complete') {
  init();
} else {
  document.addEventListener('DOMContentLoaded', function() {
    init();
  });
}

function init() {
  vm.setData(DATA);
  vm.$mount('#root');
}
