import { createSSRApp, h } from 'vue';
import VueVirtualScroller from 'vue-virtual-scroller';
import FloatingVue from 'floating-vue';

import { setPageContext } from './usePageContext.js';
import initClient from './init-client.js';

import '../assets/css/style.css';

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

function createApp(Page, pageProps, pageContext) {
	const PageWithLayout = {
		render() {
			return h(
				Container,
				{},
				{
					default() {
						return h(Page, pageProps || {});
					},
				},
			);
		},
	};

	const app = createSSRApp(PageWithLayout);

	setPageContext(app, pageContext);

	app.provide('pageContext', pageContext);

	app.use(FloatingVue);
	app.use(VueVirtualScroller);

	app.component('Link', Link);
	app.component('Icon', Icon);

	if (typeof window === 'object') {
		initClient(pageContext);
	}

	return app;
}

export { createApp };