import { useState } from "react";
import { useKeycloakThemeTranslation } from "./i18n/useKeycloakTranslation";
import { keycloakPagesContext } from "./keycloakFtlValues";
import { assert } from "evt/tools/typeSafety/assert";
import { cx } from "tss-react";
import { useKeycloakLanguage, AvailableLanguages } from "./i18n/useKeycloakLanguage";
import { getLanguageLabel } from "./i18n/getLanguageLabel";
import { useCallbackFactory } from "powerhooks";

export type Props = {
    displayInfo?: boolean;
    displayMessage: boolean;
    displayRequiredFields: boolean;
    displayWide: boolean;
    showAnotherWayIfPresent: boolean;
};

export function Template(props: Props) {

    const {
        displayInfo = false,
        displayMessage = true,
        displayRequiredFields = false,
        displayWide = false,
        showAnotherWayIfPresent = true
    } = props;

    const { t } = useKeycloakThemeTranslation();

    const { keycloakLanguage, setKeycloakLanguage } = useKeycloakLanguage();

    const onChangeLanguageClickFactory = useCallbackFactory(
        ([languageTag]: [AvailableLanguages]) =>
            setKeycloakLanguage(languageTag)
    );

    const [{ realm, locale, auth }] = useState(() => {

        assert(keycloakPagesContext !== undefined);

        return keycloakPagesContext;

    });
    //<div className="kcBodyClass"></div>

    return (

        <div className="kcLoginClass">
            <div id="kc-header" className="kcHeaderClass">
                <div id="kc-header-wrapper" className="kcHeaderWrapperClass">
                    {t("loginTitleHtml", realm.displayNameHtml)}
                </div>
            </div>
            <div className={cx("kcFormCardClass", displayWide && "kcFormCardAccountClass")}>
                <header className="kcFormHeaderClass">

                    {
                        (
                            realm.internationalizationEnabled &&
                            (assert(locale !== undefined), true) &&
                            locale.supported.length > 1
                        ) && (
                            <div id="kc-locale">
                                <div id="kc-locale-wrapper" className="kcLocaleWrapperClass">
                                    <div className="kc-dropdown" id="kc-locale-dropdown">
                                        <a href="#" id="kc-current-locale-link">
                                            {getLanguageLabel(keycloakLanguage)}
                                        </a>
                                        <ul>
                                            {
                                                locale.supported.map(
                                                    ({ languageTag }) =>
                                                        <li className="kc-dropdown-item">
                                                            <a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
                                                                {getLanguageLabel(languageTag)}
                                                            </a>

                                                        </li>
                                                )

                                            }
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        )
                    }

                    {
                        (
                            auth !== undefined &&
                            auth.showUsername &&
                            !auth.showResetCredentials
                        ) ?
                            (
                                displayRequiredFields ?
                                    (

                                        <div className="kcContentWrapperClass">
                                            <div className="kcLabelWrapperClass subtitle">
                                                <span className="subtitle">
                                                    <span className="required">*</span>
                                                    {t("requiredFields")}
                                                </span>
                                            </div>
                                            <div className="col-md-10">
                                                <h1 id="kc-page-title"><#nested "header"></h1>
                                            </div>
                                        </div>

                                    )
                                    :
                                    (

                                        <h1 id="kc-page-title"><#nested "header"></h1>

                                    )
                            )
                            :
                            (
                                displayRequiredFields ? (
                                    <div className="kcContentWrapperClass">
                                        <div class="${properties.kcLabelWrapperClass!} subtitle">
                                            <span class="subtitle"><span class="required">*</span> ${msg("requiredFields")}</span>
                                        </div>
                                        <div class="col-md-10">
                                            <#nested "show-username">
                        <div class="${properties.kcFormGroupClass!}">
                                                <div id="kc-username">
                                                    <label id="kc-attempted-username">${auth.attemptedUsername}</label>
                                                    <a id="reset-login" href="${url.loginRestartFlowUrl}">
                                                        <div class="kc-login-tooltip">
                                                            <i class="${properties.kcResetFlowIcon!}"></i>
                                                            <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ) : (

                                        <#nested "show-username">
                <div class="${properties.kcFormGroupClass!}">
                        <div id="kc-username">
                            <label id="kc-attempted-username">${auth.attemptedUsername}</label>
                            <a id="reset-login" href="${url.loginRestartFlowUrl}">
                                <div class="kc-login-tooltip">
                                    <i class="${properties.kcResetFlowIcon!}"></i>
                                    <span class="kc-tooltip-text">${msg("restartLoginTooltip")}</span>
                                </div>
                            </a>
                        </div>
                    </div>
                            )
                        )


}


      </header>
                <div id="kc-content">
                    <div id="kc-content-wrapper">

                        <#-- App-initiated actions should not see warning messages about the need to complete the action -->
          <#-- during login.                                                                               -->
          <#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)>
              <div class="alert alert-${message.type}">
                            <#if message.<span class="${properties.kcFeedbackSuccessIcon!}"></span></#if>
                        <#if message.<span class="${properties.kcFeedbackWarningIcon!}"></span></#if>
                    <#if message.<span class="${properties.kcFeedbackErrorIcon!}"></span></#if>
                <#if message.<span class="${properties.kcFeedbackInfoIcon!}"></span></#if>
            <span class="kc-feedback-text">${kcSanitize(message.summary) ? no_esc}</span>
        </div >
          </#if >

        <#nested "form" >

            <#if auth?has_content && auth.showTryAnotherWayLink() && showAnotherWayIfPresent >
          <form id="kc-select-try-another-way-form" action="${url.loginAction}" method="post" <#if displayWide>class="${properties.kcContentWrapperClass!}"</#if> >
            <div <#if displayWide>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if> >
            <div class="${properties.kcFormGroupClass!}">
                <input type="hidden" name="tryAnotherWay" value="on" />
                <a href="#" id="try-another-way" onclick="document.forms['kc-select-try-another-way-form'].submit();return false;">${msg("doTryAnotherWay")}</a>
            </div>
              </div >
          </form >
          </#if >

        <#if displayInfo>
            <div id="kc-info" class="${properties.kcSignUpClass!}">
                <div id="kc-info-wrapper" class="${properties.kcInfoAreaWrapperClass!}">
                    <#nested "info">
                  </div>
            </div>
        </#if>
        </div >
      </div >

    </div >
  </div >





    );

}