import React from "react";
import cx from "classnames";
import { Link, withRouter } from "react-router-dom";
import { Container, Dropdown, Icon, Image, Menu } from "semantic-ui-react";
const renderLogo = (logo) => (React.createElement(Image, { size: "mini", src: logo, spaced: "right", alt: "logo" }));
const renderNav = (navigation, location) => {
    const className = (n) => cx("link", "item", {
        active: n.href === location.pathname
    });
    return navigation.map(n => (React.createElement(Link, { to: n.href, key: n.href, className: className(n) }, n.contents)));
};
const renderSearch = ({ options, onChange }) => (React.createElement(Menu.Item, null,
    React.createElement(Dropdown, { placeholder: "State", search: true, selection: true, options: options, onChange: onChange })));
const renderDropDown = ({ options, trigger, color = "black" }) => (React.createElement(Dropdown, { item: true, options: options, trigger: trigger, icon: React.createElement(Icon, { name: "caret down", size: "large", color: color }) }));
export const TopBar = withRouter(({ navigation, logo, title, search, dropdown, location }) => {
    const showMenu = search || dropdown;
    let menu;
    if (showMenu) {
        menu = (React.createElement(Menu.Menu, { position: "right" },
            search && renderSearch(search),
            dropdown && renderDropDown(dropdown)));
    }
    return (React.createElement(Menu, null,
        React.createElement(Container, { fluid: true },
            React.createElement(Menu.Item, { header: true },
                React.createElement("span", null,
                    logo && renderLogo(logo),
                    title)),
            navigation && renderNav(navigation, location),
            menu)));
});
