import { createApp } from 'vue';
import { createPinia } from 'pinia';
import VueApexCharts from 'vue3-apexcharts';

import router from './dashboard/router';
import App from './dashboard/App.vue';

import '@/scss/dashboard.scss';

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.component( 'apex-chart', VueApexCharts );

app.directive( 'click-outside', {
	mounted( el, binding ) {
		el._clickOutsideHandler = ( event ) => {
			if ( ! el.contains( event.target ) ) binding.value( event );
		};
		document.addEventListener( 'mousedown', el._clickOutsideHandler );
	},
	unmounted( el ) {
		document.removeEventListener( 'mousedown', el._clickOutsideHandler );
		delete el._clickOutsideHandler;
	},
} );

// Define global properties.
app.config.globalProperties.SimpleStats = SimpleStatsVue;
app.config.globalProperties.getImageUrl = function( imageName ) {
	return SimpleStatsVue.assetsUrl + '/images/' + imageName;
}

app.mount('#simplestats-vue-app');
