import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { LOGIN_PROVIDER } from "@toruslabs/openlogin-utils";
import classNames from "classnames";
import { useContext, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { capitalizeFirstLetter } from "../config";
import { ThemedContext } from "../context/ThemeContext";
import Image from "./Image";
export default function SocialLogins(props) {
    const [canShowMore, setCanShowMore] = useState(false);
    const [isExpanded, setIsExpanded] = useState(false);
    const { socialLoginsConfig = {
        loginMethods: {},
        loginMethodsOrder: [],
        adapter: "",
        uiConfig: {},
    }, handleSocialLoginClick, } = props;
    const { isDark } = useContext(ThemedContext);
    const [t] = useTranslation();
    // Too small a function to use `useCallback`
    const expandClickHandler = () => {
        setIsExpanded(!isExpanded);
    };
    useEffect(() => {
        const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter((loginMethodKey) => {
            return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal;
        });
        setCanShowMore(maxOptions.length > 4);
    }, [socialLoginsConfig.loginMethods]);
    const adapterListClass = classNames("w3a-adapter-list", "w3ajs-socials-adapters", !isExpanded ? " w3a-adapter-list--shrink" : "");
    const adapterButtonClass = classNames("w3a-button-expand", "w3ajs-button-expand", isExpanded ? "w3a-button--rotate" : "");
    const adapterExpandText = isExpanded ? t("modal.social.view-less") : t("modal.social.view-more");
    const loginMethodsCount = Object.keys(socialLoginsConfig.loginMethods).length + 1;
    const restrictedLoginMethods = [
        LOGIN_PROVIDER.WEBAUTHN,
        LOGIN_PROVIDER.JWT,
        LOGIN_PROVIDER.SMS_PASSWORDLESS,
        LOGIN_PROVIDER.EMAIL_PASSWORDLESS,
    ];
    return (_jsxs("div", Object.assign({ className: "w3ajs-social-logins w3a-group" }, { children: [_jsx("ul", Object.assign({ className: adapterListClass }, { children: Object.keys(socialLoginsConfig.loginMethods).map((method) => {
                    var _a, _b;
                    const name = capitalizeFirstLetter(socialLoginsConfig.loginMethods[method].name || method);
                    const orderIndex = socialLoginsConfig.loginMethodsOrder.indexOf(method) + 1;
                    const order = orderIndex || Object.keys(socialLoginsConfig.loginMethods).length + 1;
                    const isMainOption = socialLoginsConfig.loginMethods[method].mainOption;
                    const isPrimaryBtn = ((_a = socialLoginsConfig === null || socialLoginsConfig === void 0 ? void 0 : socialLoginsConfig.uiConfig) === null || _a === void 0 ? void 0 : _a.primaryButton) === "socialLogin" && order === 1;
                    const imageId = `login-${method}${isDark || isPrimaryBtn ? "-light" : "-dark"}`;
                    const hoverId = `login-${method}-active`;
                    const hoverImage = method === LOGIN_PROVIDER.APPLE || method === LOGIN_PROVIDER.GITHUB ? imageId : hoverId;
                    const providerIcon = _jsx(Image, { width: "20", imageId: imageId, hoverImageId: hoverImage, isButton: true });
                    if (socialLoginsConfig.loginMethods[method].showOnModal === false || restrictedLoginMethods.includes(method)) {
                        return null;
                    }
                    const loginMethodSpan = classNames("w3a-adapter-item", ((_b = socialLoginsConfig === null || socialLoginsConfig === void 0 ? void 0 : socialLoginsConfig.uiConfig) === null || _b === void 0 ? void 0 : _b.loginGridCol) === 2 ? "col-span-3" : "col-span-2");
                    if (isMainOption || order === 1) {
                        return (_jsx("li", Object.assign({ className: "col-span-6 w3a-adapter-item", style: { order } }, { children: _jsxs("button", Object.assign({ type: "button", onClick: () => handleSocialLoginClick({
                                    adapter: socialLoginsConfig.adapter,
                                    loginParams: { loginProvider: method, name, login_hint: "" },
                                }), className: `w3a-button ${isPrimaryBtn ? "w3a-button--primary" : ""} w3a-button--login h-12 w-full`, title: name }, { children: [providerIcon, _jsx("p", Object.assign({ className: "ml-2" }, { children: t("modal.social.continueCustom", { adapter: name }) }))] })) }), method));
                    }
                    return (_jsx("li", Object.assign({ className: loginMethodSpan, style: { order: order + loginMethodsCount } }, { children: _jsx("button", Object.assign({ type: "button", onClick: () => handleSocialLoginClick({
                                adapter: socialLoginsConfig.adapter,
                                loginParams: { loginProvider: method, name, login_hint: "" },
                            }), className: "w-full w3a-button w3a-button--login", title: name }, { children: providerIcon })) }), method));
                }) })), _jsx("div", Object.assign({ className: "w3a-social__policy" }, { children: t("modal.social.policy") })), canShowMore && (_jsx("div", Object.assign({ className: "text-right" }, { children: _jsx("button", Object.assign({ type: "button", className: adapterButtonClass, onClick: expandClickHandler }, { children: _jsx("span", Object.assign({ className: "w3ajs-button-expand-text" }, { children: adapterExpandText })) })) })))] })));
}
//# sourceMappingURL=SocialLogins.js.map