require('./bootstrap');

// Import modules...
import Vue from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue';
import { InertiaProgress } from '@inertiajs/progress';
import PortalVue from 'portal-vue';
import Antd from 'ant-design-vue';
import Layout from '@/Layouts/AppLayout'
import VueMeta from 'vue-meta'
import VueCountryCode from "vue-country-code";

Vue.mixin({ methods: { route } });
Vue.use(InertiaPlugin);
Vue.use(PortalVue);
Vue.use(Antd);
Vue.use(VueMeta);
Vue.use(VueCountryCode);

const app = document.getElementById('app');

var globalHelpers = Vue.mixin({
  methods: {
    url(value) {
      return `${this.$page.props.url}${value}`
    },

    formStatus(prop) {
      return this.form.errors[prop] ? 'error' : ''
    },

    formHelp(prop) {
      return this.form.errors[prop] ? this.form.errors[prop] : ''
    },

    /**
     * Destroy with confirm
     */
    destroy(resource, id) {
      if (confirm("Are you sure you want to remove this item?")) {
        this.$inertia.delete(this.route(`${resource}.destroy`, id), {
          onSuccess: () => {
            this.$message.success('Deleted successfully')
          }
        });
      }
    },

    /**
     * Download excel file
     */
    download(group) {
      window.location.href = this.route('download', group)
    },

    /**
     * Translate
     */
    trans(key, replace = {}) {
      var translation = this.$page.props.language[key]
          ? this.$page.props.language[key]
          : key

      Object.keys(replace).forEach(function (key) {
          translation = translation.replace(':' + key, replace[key])
      });

      return translation
    },
  }
})

new Vue({
  mixins: [globalHelpers],
    render: (h) =>
        h(InertiaApp, {
            props: {
                initialPage: JSON.parse(app.dataset.page),
                // resolveComponent: (name) => require(`./Pages/${name}`).default,
                resolveComponent: name => import(`./Pages/${name}`)
                .then(({ default: page }) => {
                  if (page.layout === undefined) {
                    page.layout = Layout
                  }
                  return page
                }),
            },
        }),
}).$mount(app);

InertiaProgress.init({ color: '#4B5563' });