import { Suspense, lazy } from "react";
import type { ClassKey } from "keycloakify/login";
import type { KcContext } from "./KcContext";
import { useI18n } from "./i18n";
import DefaultPage from "keycloakify/login/DefaultPage";
import Template from "./Template";
import "./theme.css";
import "./class-theme.css";
const UserProfileFormFields = lazy(
    () => import("keycloakify/login/UserProfileFormFields")
);

const doMakeUserConfirmPassword = true;

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

    const { i18n } = useI18n({ kcContext });

    return (
        <Suspense>
            {(() => {
                switch (kcContext.pageId) {
                    default:
                        return (
                            <DefaultPage
                                kcContext={kcContext}
                                i18n={i18n}
                                classes={
                                    kcContext.themeName === "class"
                                        ? classThemeClasses
                                        : nexusThemeClasses
                                }
                                Template={Template}
                                doUseDefaultCss={false}
                                UserProfileFormFields={UserProfileFormFields}
                                doMakeUserConfirmPassword={doMakeUserConfirmPassword}
                            />
                        );
                }
            })()}
        </Suspense>
    );
}

const nexusThemeClasses = {
    kcBodyClass: "nexus-body",
    kcLoginClass: "nexus-login",
    kcHeaderClass: "nexus-header",
    kcHeaderWrapperClass: "nexus-header__name",
    kcFormCardClass: "nexus-card",
    kcFormHeaderClass: "nexus-card__header",
    kcFormGroupClass: "nexus-field",
    kcLabelClass: "nexus-label",
    kcInputClass: "nexus-input",
    kcInputGroup: "nexus-input-group",
    kcFormSettingClass: "nexus-form-settings",
    kcFormOptionsWrapperClass: "nexus-form-options",
    kcFormPasswordVisibilityButtonClass: "nexus-password-toggle",
    kcButtonClass: "nexus-button",
    kcButtonBlockClass: "nexus-button--block",
    kcButtonLargeClass: "nexus-button--large",
    kcButtonPrimaryClass: "nexus-button--primary",
    kcButtonSecondaryClass: "nexus-button--secondary",
    kcButtonDefaultClass: "nexus-button--default",
    kcAlertClass: "nexus-alert",
    kcFeedbackErrorIcon: "nexus-feedback nexus-feedback--error",
    kcFeedbackWarningIcon: "nexus-feedback nexus-feedback--warning",
    kcFeedbackSuccessIcon: "nexus-feedback nexus-feedback--success",
    kcFeedbackInfoIcon: "nexus-feedback nexus-feedback--info",
    kcFormSocialAccountSectionClass: "nexus-social",
    kcFormSocialAccountListClass: "nexus-social__list",
    kcFormSocialAccountListButtonClass: "nexus-social__button",
    kcFormSocialAccountNameClass: "nexus-social__name",
    kcSignUpClass: "nexus-signup",
    kcInfoAreaWrapperClass: "nexus-signup__inner",
    kcLocaleMainClass: "nexus-locale",
    kcLocaleDropDownClass: "nexus-locale__dropdown",
    kcLocaleListClass: "nexus-locale__list",
    kcLocaleListItemClass: "nexus-locale__list-item",
    kcLocaleItemClass: "nexus-locale__item",
    kcInputErrorMessageClass: "nexus-field__error"
} satisfies { [key in ClassKey]?: string };

const classThemeClasses = {
    kcBodyClass: "class-body",
    kcLoginClass: "class-login",
    kcHeaderClass: "class-header",
    kcHeaderWrapperClass: "class-header__name",
    kcFormCardClass: "class-card",
    kcFormHeaderClass: "class-card__header",
    kcFormGroupClass: "class-field",
    kcLabelClass: "class-label",
    kcInputClass: "class-input",
    kcInputGroup: "class-input-group",
    kcFormSettingClass: "class-form-settings",
    kcFormOptionsWrapperClass: "class-form-options",
    kcFormPasswordVisibilityButtonClass: "class-password-toggle",
    kcButtonClass: "class-button",
    kcButtonBlockClass: "class-button--block",
    kcButtonLargeClass: "class-button--large",
    kcButtonPrimaryClass: "class-button--primary",
    kcButtonSecondaryClass: "class-button--secondary",
    kcButtonDefaultClass: "class-button--default",
    kcAlertClass: "class-alert",
    kcFeedbackErrorIcon: "class-feedback class-feedback--error",
    kcFeedbackWarningIcon: "class-feedback class-feedback--warning",
    kcFeedbackSuccessIcon: "class-feedback class-feedback--success",
    kcFeedbackInfoIcon: "class-feedback class-feedback--info",
    kcFormSocialAccountSectionClass: "class-social",
    kcFormSocialAccountListClass: "class-social__list",
    kcFormSocialAccountListButtonClass: "class-social__button",
    kcFormSocialAccountNameClass: "class-social__name",
    kcSignUpClass: "class-signup",
    kcInfoAreaWrapperClass: "class-signup__inner",
    kcLocaleMainClass: "class-locale",
    kcLocaleDropDownClass: "class-locale__dropdown",
    kcLocaleListClass: "class-locale__list",
    kcLocaleListItemClass: "class-locale__list-item",
    kcLocaleItemClass: "class-locale__item",
    kcInputErrorMessageClass: "class-field__error"
} satisfies { [key in ClassKey]?: string };