import { createApp, h } from 'vue'
import {createInertiaApp, router, usePage} from '@inertiajs/vue3'
import {createPinia} from "pinia";
import {setupNaiveDiscreteApi} from "./Plugins/NaiveUI.js";
import * as Sentry from "@sentry/vue";
import {startGlobalLoading, stopGlobalLoading} from "./Composables/useGlobalLoading.js";
import './bootstrap';
import '../css/app.css';
import {NConfigProvider, NDialogProvider, NMessageProvider, ruRU, dateRuRU, darkTheme} from "naive-ui";
import { ZiggyVue } from 'ziggy-js';
import {browserTracingIntegration} from "@sentry/vue";

router.on('start', (event) => {
    startGlobalLoading()
    Sentry.setTag('route', event.detail.visit?.component || 'unknown');
    Sentry.setTag('url', window.location.href);
})

router.on('finish', () => {
    stopGlobalLoading()
})

router.on('invalid', () => {
    stopGlobalLoading()
})

router.on('exception', (event) => {
    stopGlobalLoading()
    if (event.error) {
        Sentry.captureException(event.error);
    }
})

const themeOverrides = {
    Modal: {
        peers: {
            Dialog: {
                borderRadius: '8px'
            },
            Card: {
                borderRadius: '8px'
            },
        }
    },
    Dialog: {
        borderRadius: '8px'
    },
}

// Получаем ключ и ID из мета-тегов
const keyMeta = document.querySelector('meta[name="sentry-key"]');
const idMeta = document.querySelector('meta[name="sentry-id"]');
const sentryKey = keyMeta ? keyMeta.getAttribute('content') : '';
const sentryId = idMeta ? idMeta.getAttribute('content') : '';

const dsn = sentryKey && sentryId
    ? `${window.location.protocol}//${sentryKey}@${window.location.host}/sentry/${sentryId}`
    : ''

createInertiaApp({
    id: 'onboard',
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', {eager: true})
        return pages[`./Pages/${name}.vue`]
    },
    setup({el, App, props, plugin}) {
        const vueApp =    createApp({
            render: () => h(NConfigProvider, {
                theme: darkTheme,
                themeOverrides: themeOverrides,
                locale: ruRU,
                dateLocale: dateRuRU
            }, {
                default: () => h(NDialogProvider, {}, {
                    default: () => h(NMessageProvider, {}, {
                        default: () => h(App, props)
                    })
                })
            })
        })

        const pinia = createPinia()

        vueApp.use(ZiggyVue)
        vueApp.use(plugin)
        vueApp.use(pinia)

        setupNaiveDiscreteApi(vueApp)

        Sentry.init({
            vueApp,
            dsn: dsn,
            // Setting this option to true will send default PII data to Sentry.
            // For example, automatic IP address collection on events
            sendDefaultPii: true,
            integrations: [
                Sentry.replayIntegration(),
            ],
            // Session Replay
            replaysSessionSampleRate: 0, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
            replaysOnErrorSampleRate: 0.5, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.,
            // Logs
            enableLogs: true
        });

        vueApp.mount(el)
    },
})