import './bootstrap';
import '../css/app.css';
import '../css/main.css';

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

import { createApp } from 'vue/dist/vue.esm-bundler.js';

import moment from 'moment-timezone';
import { createMetaManager } from 'vue-meta'
import router from './routes';
import vueCountryRegionSelect from 'vue-country-region-select';
import LetItSnow from 'vue-let-it-snow';

const metaManager = createMetaManager();
const app = createApp({
    components: {
        'player': import('./components/Player.vue').default,
    },
    data: function() {
        return {
            apiKey: 'd37598bc8168e874:1bc568275bc9944ed9458253013fcf5b'
        }
    },
    computed: {
        formatDate(value) {
            if (value) {
                return moment.unix((value)).format('DD/MM/YYYY H:mm');
            }
        }
    }
})
    .use(metaManager)
    .use(vueCountryRegionSelect)
    .use(LetItSnow)
    .use(router);

app.config.compilerOptions.isCustomElement = (tag) => tag.includes('player')

if(document.querySelector("meta[name='user_id']")) {
    app.config.globalProperties.$userId = document.querySelector("meta[name='user_id']").getAttribute('content');
}

if(document.querySelector("meta[name='user_name']")) {
    app.config.globalProperties.$userName = document.querySelector("meta[name='user_name']").getAttribute('content');
}

app.mount('#app');