"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UserLoginModal = void 0;
const react_1 = __importDefault(require("react"));
const Modal_1 = require("./Modal");
const Button_1 = require("../button/Button");
const Logo_1 = require("../logo/Logo");
const AccordionWrap_1 = require("../accordion/AccordionWrap");
const AccordionTab_1 = require("../accordion/AccordionTab");
const react_router_dom_1 = require("react-router-dom");
const orcid_24x24_png_1 = __importDefault(require("../assets/orcid_24x24.png"));
const UserLoginModal = ({ isOpen, toggle, loginUrls, }) => {
    const location = (0, react_router_dom_1.useLocation)();
    const redirectPath = `${location.pathname}${location.search}`;
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(Modal_1.Modal, { isOpen: isOpen, toggle: toggle },
            react_1.default.createElement("div", { className: "sign-in-modal-header" },
                react_1.default.createElement(Logo_1.Logo, { horizontal: true, dark: true, width: "230px" }),
                react_1.default.createElement("h2", null, "Sign in")),
            react_1.default.createElement("div", { className: "sign-in-modal-content" },
                react_1.default.createElement("div", null,
                    react_1.default.createElement("a", { href: loginUrls.google + `?redirectPath=${btoa(redirectPath)}` },
                        react_1.default.createElement(Button_1.Button, { className: "login-button", primary: true, label: "Google", icon: "fab fa-google", iconSize: "23px" }))),
                react_1.default.createElement("div", null,
                    react_1.default.createElement("a", { href: loginUrls.orcid + `?redirectPath=${btoa(redirectPath)}` },
                        react_1.default.createElement(Button_1.Button, { className: "login-button", primary: true, label: "ORCID", imgSrc: orcid_24x24_png_1.default })),
                    react_1.default.createElement(AccordionWrap_1.AccordionWrap, null,
                        react_1.default.createElement(AccordionTab_1.AccordionTab, { id: "orcid-info-accordion", label: "What is this?", accordionStyle: "plain", children: react_1.default.createElement(react_1.default.Fragment, null,
                                "ORCID users are identified and connected to their contributions and affiliations, across disciplines, borders, and time.",
                                " ",
                                react_1.default.createElement("a", { href: "https://orcid.org/content/about-orcid" }, "Learn more")) })))))));
};
exports.UserLoginModal = UserLoginModal;
