require('./bootstrap');
require('@thyrith/momentkh')(moment);
window.Vue = require('vue').default;
window.Fire = new Vue;
Vue.config.productionTip = false;
import App from './App.vue';
import VueI18n from 'vue-i18n';
import { router } from './router';
import store from "./store/index";
import mixin from "./mixins";
import Form from 'vform'
import Multiselect from '@vueform/multiselect/dist/multiselect.vue2.js'
import '@vueform/multiselect/themes/default.css';
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
import VueConfirmDialog from 'vue-confirm-dialog'
import Suggestions from 'v-suggestions'
import 'v-suggestions/dist/v-suggestions.css'
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
import moment from 'moment'
import VueProgressBar from 'vue-progressbar'
// import VueLoading from 'vuejs-loading-plugin'
import InputTag from 'vue-input-tag'
import Vue2Filters from 'vue2-filters';
import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';
import VueApexCharts from 'vue-apexcharts';
import funLoading from './loading.js';

Vue.use(funLoading);

const options = {
    name: '_blank',
    specs: [
        'fullscreen=yes',
        'titlebar=yes',
        'scrollbars=yes'
    ],
    styles: [
        './css/app.css',
        '/css/style-print.css'
    ],
    timeout: 1000,
    autoClose: true,
    windowTitle: window.document.title,
}
Vue.use(VueHtmlToPaper, options);

window.Form = Form;
Vue.use(VueI18n);
Vue.use(Vue2Filters);
Vue.use(VueApexCharts);
Vue.component('apexchart', VueApexCharts)
Vue.use(Toast);
Vue.use(VueConfirmDialog)
Vue.component('vue-confirm-dialog', VueConfirmDialog.default)
Vue.component('pagination', require('laravel-vue-pagination'));
Vue.component("Multiselect", Multiselect);
Vue.component('suggestions', Suggestions)
Vue.component('input-tag', InputTag)
Vue.mixin(mixin);
Vue.use(DatePicker);
Vue.use(moment);
Vue.use(VueProgressBar, {
    color: '#43AF82',
    failedColor: '#DC3545',
    thickness: '4px',
    transition: {
        speed: '0.2s',
        opacity: '0.6s',
        termination: 300
    },
    autoRevert: true,
    location: 'top',
    inverse: false
})


Vue.filter('onlyDate', function(value) {
    if (value) {
        return moment(String(value)).format('DD/MM/YYYY')
    }
});
Vue.filter('dateTime', function(value) {
    if (value) {
      return moment(String(value)).format('DD-MMM-YYYY   hh:mm A')
    }
  });
  Vue.filter('onlyDay', function(value) {
      if (value) {
        return moment(String(value)).format('DD')
      }
  });
  Vue.filter('onlyMonthKh', function (value) {
    if (value) {
      const khmerMonths = {
        Jan: 'បុស្ស',
        Feb: 'មាឃ',
        Mar: 'ផល្គុន',
        Apr: 'ចេត្រ',
        May: 'ពិសាខ',
        Jun: 'ជេស្ឋ',
        Jul: 'អាសាធ',
        Aug: 'ស្រាពណ៌',
        Sep: 'ភទ្របទ',
        Oct: 'អស្សុជ',
        Nov: 'កត្តិក',
        Dec: 'មិគសិរ'
      };
      const monthAbbr = moment(String(value)).format('MMM');
      return khmerMonths[monthAbbr] || monthAbbr; // Return Khmer month name or fallback
    }
    return value;
  });
  Vue.filter('onlyMonth', function (value) {
    if (value) {
      const khmerMonths = {
        Jan: 'មករា',
        Feb: 'កុម្ភៈ',
        Mar: 'មីនា',
        Apr: 'មេសា',
        May: 'ឧសភា',
        Jun: 'មិថុនា',
        Jul: 'កក្កដា',
        Aug: 'សីហា',
        Sep: 'កញ្ញា',
        Oct: 'តុលា',
        Nov: 'វិច្ឆិកា',
        Dec: 'ធ្នូ'
      };
      const monthAbbr = moment(String(value)).format('MMM'); // Get the short month name
      return khmerMonths[monthAbbr] || monthAbbr; // Return Khmer month name or fallback
    }
    return ''; // Fallback if value is falsy
  });
  
  Vue.filter('onlyYear', function(value) {
      if (value) {
        return moment(String(value)).format('YYYY')
      }
  });
  Vue.filter('Time', function(value) {
    if (value) {
      return moment(String(value)).format('hh:mm A')
    }
  });
Vue.filter('numberFomartValue', function(value) {
    if (value) {
        return value.toLocaleString();
    } else {
        return 0;
    }
});
const i18n = new VueI18n({
    locale: localStorage.getItem("lang") || "km",
    messages: {
        en: require("./assets/i18n/en"),
        km: require("./assets/i18n/km")
    }
});











new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App),
});
