import React from "react";
import { Modal } from "./Modal";
import { Button } from "../button/Button";
import { Logo } from "../logo/Logo";
import { AccordionWrap } from "../accordion/AccordionWrap";
import { AccordionTab } from "../accordion/AccordionTab";
import { useLocation } from "react-router-dom";
import orcidIcon from "../assets/orcid_24x24.png";
export const UserLoginModal = ({ isOpen, toggle, loginUrls, }) => {
    const location = useLocation();
    const redirectPath = `${location.pathname}${location.search}`;
    return (React.createElement(React.Fragment, null,
        React.createElement(Modal, { isOpen: isOpen, toggle: toggle },
            React.createElement("div", { className: "sign-in-modal-header" },
                React.createElement(Logo, { horizontal: true, dark: true, width: "230px" }),
                React.createElement("h2", null, "Sign in")),
            React.createElement("div", { className: "sign-in-modal-content" },
                React.createElement("div", null,
                    React.createElement("a", { href: loginUrls.google + `?redirectPath=${btoa(redirectPath)}` },
                        React.createElement(Button, { className: "login-button", primary: true, label: "Google", icon: "fab fa-google", iconSize: "23px" }))),
                React.createElement("div", null,
                    React.createElement("a", { href: loginUrls.orcid + `?redirectPath=${btoa(redirectPath)}` },
                        React.createElement(Button, { className: "login-button", primary: true, label: "ORCID", imgSrc: orcidIcon })),
                    React.createElement(AccordionWrap, null,
                        React.createElement(AccordionTab, { id: "orcid-info-accordion", label: "What is this?", accordionStyle: "plain", children: React.createElement(React.Fragment, null,
                                "ORCID users are identified and connected to their contributions and affiliations, across disciplines, borders, and time.",
                                " ",
                                React.createElement("a", { href: "https://orcid.org/content/about-orcid" }, "Learn more")) })))))));
};
