---
import Layout from "../../../layouts/Layout.astro";
import { getProductsByIds, getSite, getSiteConfig, getSiteHomePage } from "../../../data/api-client";
import { genericPageForProduct } from "../../../lib/page-from-models";
import { SupportedLocales } from "../../../data/internals/LocalizedT";
import type { Page } from "../../../data/models/multis/Page";
import type { Site } from "../../../data/models/singles/Site";
import { pick as pickLanguage } from "../../../lib/accept-language-parser";
import { overrideLocaleFromUrl, localeFromLang } from "../../../lib/locales";
import Banner from "../../../components/Banner.astro";
import ComponentRouter from "../../../components/ComponentRouter.astro";
// import { Disclaimers } from "../../../lib/disclaimer";
import { renderMarkdown } from "../../../lib/rendering";
import Disclaimers from "../../../components/Disclaimers.astro";

const { productLookup, resource, id } = Astro.params;

const locale = overrideLocaleFromUrl(productLookup!, localeFromLang(pickLanguage(['en', 'es', 'fr'], Astro.request.headers.get('Accept-Language')||'en-US', { loose: true })||'en'));

const productLookupParts = productLookup?.split('/')||[];
if (productLookupParts?.length < 2) {
    return Astro.rewrite(`${locale}/404/`);
}
const productId = productLookupParts[1];
const productDto = await getProductsByIds(productId);

if (productDto.items.length < 1) {
	return Astro.rewrite(`${locale}/404/`);
}
// to support product category special pages on the backend
// else if (productDto.items[0].data && productDto.items[0].data.productPage && productDto.items[0].data.productPage.iv && productDto.items[0].data.productPage.iv.length) {
//     return Astro.rewrite(`/views/pages/${locale}/${productDto.items[0].data.productPage.iv[0]}`);
// }

const siteConfigDto = await getSiteConfig();
const siteConfig = siteConfigDto.items[0].data!;

const siteDto = await getSite();
const site: Site = siteDto.items[0].data!;
const siteEditToken = siteDto.items[0].editToken;

const homePageId = site.homePage.iv[0];
const homePageDto = await getSiteHomePage(site);
const homePage: Page = homePageDto.items[0].data!;

const product = productDto.items[0].data!;

Astro.response.headers.set('Content-Type', 'text/html; charset=utf-8');

const page = genericPageForProduct({product, productId, homePageId});
const pageEditToken = productDto.items[0].editToken;

const title = page?.title[locale]||'';
const metaDescription = page?.seo[locale]?.metaDescription || '';
const siteName = site.siteName[locale];
const pageContent = page?.content[locale]!;
const shouldEmbedSquidexSDK = import.meta.env.MODE === 'development';
const renderContext = {
	...Astro.params,
	title,
	metaDescription,
	siteName,
	pageComponents: pageContent,
	page,
	site,
	isHomePage: false,
	isLocaleHomepage: false,
	shouldEmbedSquidexSDK,
	// disclaimers,
}
---
<Layout locale={locale} title={title} site={site} siteConfig={siteConfig} siteEditToken={siteDto.items[0].editToken} page={page} shouldEmbedSquidexSDK={shouldEmbedSquidexSDK}>
	<slot name="head">
		{ metaDescription && <meta name="description" content={metaDescription} /> }
		{
			Object.entries(SupportedLocales).map((supportedLanguage) => {
				return (
					<link
						rel="alternate"
						href={`/${supportedLanguage[0]}/${page?.slug[supportedLanguage[0]]}`}
						hreflang={supportedLanguage[0].substring(0, locale.indexOf('-'))}
						type="text/html"
						title={page?.title[supportedLanguage[0]]}
					/>
				);
			})
		}
	</slot>
	<main>
		<Banner editToken={siteDto.items[0].editToken} homePageLink={`/${locale}/`} siteName={site.siteName[locale]} />
		<ComponentRouter
			componentRouter={page.content[locale]||[]}
			homePage={homePage}
			isHomePage={false}
			locale={locale}
			page={page}
			pageEditToken={pageEditToken}
            productDto={productDto}
			brand={undefined}
			site={site}
			siteEditToken={siteEditToken}
		/>
    </main>
	<span slot="disclaimers">
		<Disclaimers locale={locale} />
	</span>
	<!-- {disclaimers.getDisclaimers().length > 0 &&
		<span slot="disclaimers">
			{
				disclaimers.getDisclaimers().map((disclaimer) => (
					<span set:html={renderMarkdown(disclaimer.renderedText)}></span>
				))
			}
		</span>
	} -->
</Layout>

<style>
	main {
		margin: auto;
		min-width: 800px;
		max-width: calc(100% - 2rem);
		color: white;
		font-size: 16pt;
		line-height: 1.6;
	}
	a, a:link, a:visited { text-decoration: none; color: #fff }
	a:hover { text-decoration: underline; color: #fff }
</style>