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

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

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

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

function init() {
    const store = initStore(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);

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

init();