import React from "react";
import { useNavigate } from "react-router-dom";
import { Button } from "../button/Button";
import { ModalityCube } from "../modality-cube/ModalityCube";
import { cubeData } from "../content/modality-cube-content.jsx";
import orcidIcon from "../assets/orcid_24x24.png";
import { frontPage } from "../content/front-page-content.jsx";
export const LandingExpandedHeader = ({ user, loginUrls, renderAggregateCounts, renderFacetSelect, renderSearchInput, onSearch, }) => {
    const aggregateCounts = (modality) => renderAggregateCounts ? renderAggregateCounts(modality) : null;
    const navigate = useNavigate();
    const hexGrid = (React.createElement("ul", { id: "hexGrid" }, cubeData.map((item, index) => (React.createElement(ModalityCube, { portal: item.portal, key: index, label: item.label, cubeImage: item.cubeImage, altText: item.altText, cubeFaceImage: item.cubeFaceImage, stats: aggregateCounts(item.label), onClick: (redirectPath) => (_err) => {
            navigate(redirectPath);
        } })))));
    return (React.createElement("div", { className: "expaned-header", style: { minHeight: "720px" } },
        React.createElement("div", { className: "container" },
            React.createElement("div", { className: "grid grid-between header-wrap" },
                React.createElement("div", { className: "col expaned-h-left" },
                    frontPage.pageDescription,
                    React.createElement("div", { className: "header-aggregate" }, aggregateCounts(null)),
                    React.createElement("div", { className: "header-modality-wrap" }, renderFacetSelect()),
                    React.createElement("span", { className: "header-or-text" }, "Or"),
                    React.createElement("div", { className: "header-input-wrap" },
                        React.createElement("div", { className: "header-input" }, renderSearchInput()),
                        React.createElement("div", { className: "header-input-button" },
                            React.createElement(Button, { onClick: () => onSearch(), primary: true, icon: "fas fa-search", size: "small", iconOnly: true, label: "Search" }))),
                    !user
                        ? (React.createElement("div", { className: "grid  grid-start hero-signin" },
                            React.createElement("div", { className: " hero-sigin-label" },
                                React.createElement("h3", null, "SIGN IN")),
                            React.createElement("div", null,
                                React.createElement("a", { href: loginUrls.google },
                                    React.createElement(Button, { label: "Google", color: "#fff", icon: "fab fa-google", iconSize: "23px" }))),
                            React.createElement("div", null,
                                React.createElement("a", { href: loginUrls.orcid },
                                    React.createElement(Button, { label: "ORCID", color: "#fff", imgSrc: orcidIcon, iconSize: "23px" })))))
                        : null),
                hexGrid))));
};
