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

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

import Container from './container.vue';

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

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, {
		container: '#container',
		autoBoundaryMaxSize: true,
		shiftCrossAxis: true,
		overflowPadding: 10,
		arrowPadding: 10,
	});

	app.use(VueVirtualScroller);

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

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

	return app;
}

export { createApp };
