import config from 'config';
import { createApp } from 'vue';
import dayjs from 'dayjs';
import mitt from 'mitt';
import tippy from 'tippy.js';

import router from './router';
import initStore from './store';
import initUiObservers from './ui/observers';
import initAuthObservers from './auth/observers';

import { formatDate, formatDuration } from './format';

import '../css/style.scss';
import 'tippy.js/dist/tippy.css';

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 getBasePath(media, type, options) {
		if (store.state.ui.sfw) {
			return config.media.assetPath;
		}

		if (media.isS3) {
			return config.media.s3Path;
		}

		if (options?.local) {
			return config.media.assetPath;
		}

		return config.media.mediaPath;
	}

	function getFilename(media, type, options) {
		if (store.state.ui.sfw && type && !options?.original) {
			return media.sfw[type];
		}

		if (store.state.ui.sfw) {
			return media.sfw.path;
		}

		if (type && !options?.original) {
			return media[type];
		}

		return media.path;
	}

	function getPath(media, type, options) {
		if (!media) {
			return null;
		}

		const path = getBasePath(media, type, options);
		const filename = getFilename(media, type, options);

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

	await initAuthObservers(store, router);
	await 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,
			};
		},
		computed: {
			theme() { return this.$store.state.ui.theme; },
		},
		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) {
			// don't include HTML in native title attribute
			const textEl = document.createElement('div');
			textEl.innerHTML = binding.value;

			el.title = textEl.textContent; // eslint-disable-line no-param-reassign

			tippy(el, {
				content: binding.value,
				allowHTML: true,
				duration: [0, 0],
			});
		},
	});

	app.mount('#container');
}

init();