import Vue from 'vue';
import VTooltip from 'v-tooltip';
import VueLazyLoad from 'vue-lazyload';
import dayjs from 'dayjs';

import router from './router';
import initStore from './store';

import initUiObservers from './ui/observers';

import '../css/style.scss';

import Container from '../components/container/container.vue';
import Icon from '../components/icon/icon.vue';

function init() {
	const store = initStore(router);

	initUiObservers(store, router);

	if (window.env.sfw) {
		store.dispatch('setSfw', true);
	}

	Vue.mixin({
		components: {
			Icon,
		},
		watch: {
			pageTitle(title) {
				if (title) {
					document.title = `traxxx - ${title}`;
					return;
				}

				document.title = 'traxxx';
			},
		},
		methods: {
			formatDate: (date, format) => dayjs(date).format(format),
			isAfter: (dateA, dateB) => dayjs(dateA).isAfter(dateB),
			isBefore: (dateA, dateB) => dayjs(dateA).isBefore(dateB),
		},
	});

	Vue.use(VTooltip);
	Vue.use(VueLazyLoad, {
		throttleWait: 0,
	});

	new Vue({ // eslint-disable-line no-new
		el: '#container',
		store,
		router,
		render(createElement) {
			return createElement(Container);
		},
	});
}

init();