import config from 'config';
import { createApp } from 'vue';
import dayjs from 'dayjs';
import mitt from 'mitt';

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';
import Tooltip from '../components/tooltip/tooltip.vue';
import Dialog from '../components/dialog/dialog.vue';

async function init() {
	let uid = 0;

	const store = initStore(router);
	const app = createApp(Container);
	const events = mitt();

	function getPath(media, type, options) {
		const path = (store.state.ui.sfw && media.assetPath)
			|| (media.isS3 && config.media.s3Path)
			|| (options?.local && config.media.assetPath)
			|| config.media.mediaPath;

		const filename = type && !options?.original ? media[type] : media.path;

		return `${path}/${filename}`;
	}

	initUiObservers(store, router);

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

	app.use(store);
	app.use(router);

	await router.isReady();

	app.mixin({
		components: {
			Icon,
			Footer,
			Tooltip,
			'v-popover': Tooltip,
			Dialog,
		},
		data() {
			return {
				events,
				config,
			};
		},
		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),
			getPath,
			getBgPath: (media, type) => `url(${getPath(media, type)})`,
		},
		beforeCreate() {
			this.uid = uid;
			uid += 1;
		},
	});

	app.directive('tooltip', {
		beforeMount(el, binding) {
			// console.log(binding.modifiers);
			el.title = binding.value; // eslint-disable-line no-param-reassign
		},
	});

	app.mount('#container');
}

init();