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 { formatDate, formatDuration } from './format';

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

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

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

	initUiObservers(store, router);

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

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

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

	Vue.use(VTooltip, {
		popover: {
			defaultContainer: '.container',
		},
	});
	Vue.use(VueLazyLoad, {
		throttleWait: 0,
	});

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

init();