// WARNING: There is no reason to own this file.
// If you want to apply CSS level customization, own ./styleLevelCustomization.tsx instead
import type { ReactNode } from "react";
import { assert } from "tsafe/assert";
import { KcClsxProvider } from "@keycloakify/keycloak-login-ui/useKcClsx";
import { type KcContext, KcContextProvider } from "./KcContext";
import { I18nProvider } from "./i18n";
import { useExclusiveAppInstanceEffect } from "@keycloakify/keycloak-login-ui/tools/useExclusiveAppInstanceEffect";
import { useStyleLevelCustomization } from "./styleLevelCustomization";
import { PageIndex } from "./pages/PageIndex";

export default function KcPage(props: { kcContext: KcContext }) {
    const { kcContext } = props;

    return (
        <KcContextProvider kcContext={kcContext}>
            <I18nProvider kcContext={kcContext}>
                <StyleLevelCustomization>
                    <PageIndex />
                </StyleLevelCustomization>
            </I18nProvider>
        </KcContextProvider>
    );
}

function StyleLevelCustomization(props: { children: ReactNode }) {
    const { children } = props;

    const { doUseDefaultCss, classes, loadCustomStylesheet, globalStyleNode } =
        useStyleLevelCustomization();

    useExclusiveAppInstanceEffect({
        effectId: "loadCustomStylesheet",
        isEnabled: loadCustomStylesheet !== undefined,
        effect: () => {
            assert(loadCustomStylesheet !== undefined);
            loadCustomStylesheet();
        }
    });

    return (
        <KcClsxProvider doUseDefaultCss={doUseDefaultCss} classes={classes}>
            {globalStyleNode !== undefined && globalStyleNode}
            {children}
        </KcClsxProvider>
    );
}