import Alpine from './vendor/alpinejs-3.15.8.js';
import { createApp } from 'vue';
import App from './app.vue';
import { SSEManager } from './sse-manager';
import { SetupSidebar } from "./sidebar";
import 'maplibre-gl/dist/maplibre-gl.css';

// Import Bootstrap SCSS
import './style/style.scss';

// Import Bootstrap JavaScript and make it available globally
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

import { Planning } from './app/planning';

// Make Alpine available on window for inline Alpine
window.Alpine = Alpine;

// Make SSEManager available to all the JavaScript
window.SSEManager = SSEManager;

function createAppPlanning() {
	const app = createApp({
		data() {
			return {
				count: 0
			}
		}
	});
}
window.createAppPlanning = createAppPlanning;

// Wait for DOM to be ready, then initialize Alpine
document.addEventListener("DOMContentLoaded", () => {
	Alpine.start();
	SSEManager.connect("/api/events");
	SetupSidebar();
});
interface GreetingComponent {
    message: string;
    name: string;
    updateMessage(): void;
}

Alpine.data('greeting', (): GreetingComponent => ({
    message: 'Welcome to Alpine + TypeScript!',
    name: 'World',
    
    updateMessage() {
        this.message = 'Message updated at ' + new Date().toLocaleTimeString();
    }
}));

createApp(App).mount('#app');