// https://vike.dev/onRenderHtml
import config from 'config';
import { renderToString as renderToString_ } from '@vue/server-renderer';
import { escapeInject, dangerouslySkipEscape } from 'vike/server'; /* eslint-disable-line import/extensions */

import { createApp } from './app.js';

function getTitle(location) {
	if (!location) {
		return config.title;
	}

	return `${config.title} - ${location.slice(0, 1).toUpperCase()}${location.slice(1)}`;
}

async function renderToString(app) {
	let err;
	// Workaround: renderToString_() swallows errors in production, see https://github.com/vuejs/core/issues/7876

	app.config.errorHandler = (err_) => { // eslint-disable-line no-param-reassign
		err = err_;
	};

	const appHtml = await renderToString_(app);

	if (err) {
		throw err;
	}

	return appHtml;
}

async function onRenderHtml(pageContext) {
	const { Page, pageProps } = pageContext;
	// This onRenderHtml() hook only supports SSR, see https://vike.dev/render-modes for how to modify
	// onRenderHtml() to support SPA

	if (!Page) {
		throw new Error('My render() hook expects pageContext.Page to be defined');
	}

	const app = createApp(Page, pageProps, pageContext);

	const appHtml = await renderToString(app);

	// See https://vike.dev/head
	const { documentProps } = pageContext.exports;
	const title = getTitle(documentProps?.title || pageContext.title);

	const documentHtml = escapeInject`<!DOCTYPE html>
	<html lang="en">
	  <head>
		<meta charset="UTF-8" />

		<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
		<link rel="manifest" href="/img/favicon/site.webmanifest">
		<link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
		<link rel="shortcut icon" href="/img/favicon/favicon.ico">

		<meta name="msapplication-TileColor" content="#b91d47">
		<meta name="msapplication-config" content="/img/favicon/browserconfig.xml">
		<meta name="theme-color" content="#f65596">

		<meta property="og:title" content="traxxx" />
		<meta property="og:image" content="https://traxxx.me/img/og_logo.png" />

		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,interactive-widget=resizes-content" />

		<meta name="description" content="Keep track of new porn releases and re-discover classics from your favorite porn stars and sites" />

		${config.analytics.enabled ? dangerouslySkipEscape(`<script src="${config.analytics.address}" data-website-id="${config.analytics.siteId}" async></script>`) : ''}

		<title>${title}</title>
	  </head>
	  <body>
		<div id="app">${dangerouslySkipEscape(appHtml)}</div>
	  </body>
	</html>`;

	return {
		documentHtml,
	};
}

export { onRenderHtml };