import React from "react";
import { ModalityHeader } from "./ModalityHeader";
import { CommunityHeader } from "./CommunityHeader";
export const SearchPage = ({ portalContent, renderSearchFacets, renderSearchResultsList, renderSortBy, renderFilterBlock, renderSearchHeader, renderLoading, renderAggregateCounts, }) => {
    const [isOpen, setOpen] = React.useState(false);
    return (React.createElement(React.Fragment, null,
        React.createElement("section", { className: `search search-page ${portalContent?.className || " "} ${isOpen ? " search-filters-open" : " "}` },
            portalContent
                ? (React.createElement(React.Fragment, null,
                    portalContent.portalName
                        ? (React.createElement(ModalityHeader, { portalName: portalContent.portalName, portalPrimary: portalContent.portalPrimary, hexBackgroundImage: portalContent.hexBackgroundImage, renderAggregateCounts: renderAggregateCounts }))
                        : null,
                    portalContent.communityHeader
                        ? (React.createElement(CommunityHeader, { communityHeader: portalContent.communityHeader, communityPrimary: portalContent.communityPrimary, communitySecondary: portalContent.communitySecondary }))
                        : null))
                : null,
            React.createElement("div", { className: "container" },
                React.createElement("div", { className: "grid grid-nogutter" },
                    React.createElement("div", { className: "col col-12 search-heading" },
                        React.createElement("h1", null, renderSearchHeader())),
                    React.createElement("div", { className: "col col-12 search-wrapper" },
                        React.createElement("button", { className: "show-filters-btn", onClick: () => setOpen(!isOpen) }, "Show Filters"),
                        React.createElement("div", { className: isOpen
                                ? "search-nav search-facet-wrapper show-mobile-filters"
                                : "search-nav search-facet-wrapper" },
                            React.createElement("button", { className: "close-filters-btn", onClick: () => setOpen(!isOpen) }, "Close Filters"),
                            renderSearchFacets()),
                        React.createElement("div", { className: "search-content" },
                            renderLoading(),
                            React.createElement("div", { className: "grid grid-nogutter" },
                                React.createElement("div", { className: "col col-12" }, renderFilterBlock()),
                                React.createElement("div", { className: "col col-12" },
                                    React.createElement("div", { className: "grid grid-nogutter" }, renderSortBy())),
                                renderSearchResultsList()))))))));
};
