import React from "react";
import { NavLink } from "react-router-dom";
import { Button } from "../button/Button";
import { Logo } from "../logo/Logo";
import { Modal } from "../modal/Modal";
import { UserMenu } from "../user/UserMenu";
export const Header = ({ profile, expanded, isOpenSupport, toggleLoginModal, signOutAndRedirect, toggleSupport, navigateToNewSearch, renderOnExpanded, renderOnFreshDeskWidget, renderUploader, }) => {
    const [isOpen, setOpen] = React.useState(false);
    return (React.createElement(React.Fragment, null,
        React.createElement("header", null,
            React.createElement("div", { className: isOpen
                    ? "navbar-inner-wrap nav-open"
                    : "navbar-inner-wrap nav-closed" },
                React.createElement("div", { className: "navbar-brand" },
                    React.createElement(NavLink, { to: "/" },
                        React.createElement(Logo, { horizontal: true, dark: false })),
                    React.createElement("h1", { className: "sr-only" }, "OpenNeuro")),
                React.createElement("div", { className: "navbar-navigation" },
                    React.createElement("span", { className: "mobile-collapse-toggle", onClick: () => setOpen((prev) => !prev) },
                        React.createElement("i", { className: "fas fa-bars" }),
                        React.createElement("span", null, "menu bar")),
                    React.createElement("ul", null,
                        React.createElement("span", { className: "mobile-nav-close-x", onClick: () => setOpen((prev) => !prev) }, "\u00D7"),
                        React.createElement("li", null,
                            React.createElement(NavLink, { to: "/search", onClick: (e) => {
                                    e.preventDefault();
                                    setOpen((prev) => !prev);
                                    navigateToNewSearch();
                                } }, "Search")),
                        React.createElement("li", null,
                            React.createElement("span", { className: "no-a", onClick: () => {
                                    setOpen((prev) => !prev);
                                    toggleSupport();
                                } }, "Support")),
                        React.createElement("li", null,
                            React.createElement("a", { href: "https://docs.openneuro.org" }, "Documentation")),
                        profile
                            ? (React.createElement("li", { onClick: () => setOpen((prev) => !prev) }, renderUploader()))
                            : null)),
                React.createElement("div", { className: "navbar-account" }, profile
                    ? (React.createElement("div", { className: "header-account-btn" },
                        React.createElement(UserMenu, { profile: profile, signOutAndRedirect: signOutAndRedirect })))
                    : (React.createElement(React.Fragment, null,
                        React.createElement(Button, { navbar: true, onClick: toggleLoginModal, label: "Sign in", size: "large" })))),
                expanded ? renderOnExpanded(profile) : null)),
        React.createElement(Modal, { className: "freshdesk-support", isOpen: isOpenSupport, toggle: toggleSupport, closeText: "Close" },
            React.createElement("h3", null, "OpenNeuro Support"),
            React.createElement("p", null,
                "Please email issues or questions to",
                React.createElement("br", null),
                React.createElement("a", { href: "mailto:support@openneuro.freshdesk.com" }, "support@openneuro.freshdesk.com"),
                React.createElement("br", null),
                "or use the form below."),
            renderOnFreshDeskWidget())));
};
