'use client';

import { ReactNode, useEffect, useState } from 'react';
import { ErrorType } from '../helper/MagnoliaPageRestClient.ts';
import { inject, injectable } from 'tsyringe';
import { RestClient } from '../helper/RestClient.ts';
import { MagnoliaContextProvider } from '../helper/MagnoliaContextProvider.ts';
import { type HeadlessConfigProviderI, HEADLESS_CONFIG_PROVIDER_TOKEN } from '../config/ConfigProvider.ts';
import { AbstractDynamicErrorPage, ErrorPageLoader } from './AbstractDynamicErrorPage.tsx';

import { type StylesheetProviderI, STYLESHEET_PROVIDER_TOKEN } from '../config/StylesheetProvider.ts';
import { type ComponentMappingsProviderI } from '../config/ComponentMappingsProvider.ts';
import { StaticErrorPage } from '../templates/pages/_error-static/ErrorStatic.tsx';
import { CombinedComponentMappingsProvider } from '../templates/ComponentMappingsProvider.ts';
import { ThemeValidator } from '../helper/ThemeValidator.ts';
import { EditablePage } from '../templates/pages/__magnolia-editable-page/EditablePage.tsx';
import { useCspHeaderNonce } from './provider/impl/CspHeaderNonceContext.tsx';

@injectable()
export class DynamicErrorPage extends AbstractDynamicErrorPage {
	constructor(
		@inject(CombinedComponentMappingsProvider) componentMappingsProvider: ComponentMappingsProviderI,
		@inject(HEADLESS_CONFIG_PROVIDER_TOKEN) configProvider: HeadlessConfigProviderI,
		@inject(STYLESHEET_PROVIDER_TOKEN) StylesheetProviderI: StylesheetProviderI,
		@inject(ThemeValidator) themeValidator: ThemeValidator,
		@inject(EditablePage) editablePage: EditablePage,
		@inject(RestClient) restClient: RestClient,
		@inject(StaticErrorPage) staticErrorPage: StaticErrorPage,
		@inject(MagnoliaContextProvider) magnoliaContextProvider: MagnoliaContextProvider,
		@inject(ErrorPageLoader) private readonly errorPageLoader: ErrorPageLoader,
	) {
		super(componentMappingsProvider, configProvider, StylesheetProviderI, themeValidator, editablePage, restClient, staticErrorPage, magnoliaContextProvider);
	}

	public render(errorType: ErrorType): ReactNode {
		const [errorPage, setErrorPage] = useState(null);
		const nonce = useCspHeaderNonce();
		useEffect(() => {
			const currentUrl = new URL(window.location.href);
			super
				.renderDynamic(currentUrl, errorType, nonce)
				.catch(() => super.renderStatic(this.getLanguage(currentUrl), errorType))
				.then((content) => setErrorPage(content));
		}, []);

		if (!errorPage) {
			return this.errorPageLoader.render(errorType);
		}
		return errorPage;
	}

	private getLanguage(url: URL): string {
		try {
			return this.magnoliaContextProvider.getMagnoliaContext(url).currentLanguage;
		} catch {
			return '';
		}
	}
}