import React, { FunctionComponent } from "react";
import classNames from "classnames";
import PropTypes from "prop-types";

import Icon from "react-oui-icons";
import Link from "../Link";

export type NavigationProps = {
    /** CSS class names. */
    className?: string;
    /** Navigates to this URL when the help icon is clicked */
    helpUrl?: string;
    /** Navigates to this URL when the logo clicked */
    homeUrl?: string;
    /** Brand logo image url */
    logoUrl?: string;
    /** Function called when the help icon is clicked */
    onHelpClick?: (event: Event, url?: string) => void;
    /** Navigation bar style. Can be one of these:
     *  - light
     *  - dark
     *  dark by default
     */
    theme?: "light" | "dark";
    /** Navigation bar title */
    title: string;
}

export const Navigation: FunctionComponent<NavigationProps> = ({
    className,
    helpUrl,
    homeUrl,
    logoUrl,
    onHelpClick = () => null,
    theme="dark",
    title,
    ...props
}: NavigationProps) => {
    const themeClass = `axiom-navigation--${theme}`
    const classes = classNames({
        "axiom-navigation": true,
        "flex": true,
        "flex-align--center": true,
        [themeClass]: true,
    }, className);
    const onAppRouteLinkClick: (...args: any[]) => any = event => {
        return onHelpClick(event, helpUrl);
    };

    return (
        <nav
            className={classes}
            data-test-section="navigation"
            {...props}
        >
            <div className="axiom-navigation__brand soft-double--right flex flex-align--center flex-shrink--none">
                {logoUrl && (
                    <div className="axiom-navigation__logo">
                        <Link
                            href={homeUrl}
                            testSection="navigation--brand-logo"
                        >
                            <img
                                alt="logo"
                                src={logoUrl}
                                className="push--right axiom-navigation__logo--mark"
                            />
                        </Link>
                    </div>
                )}
                {title && (
                    <div className="axiom-navigation__title">
                        {title}
                    </div>
                )}
            </div>
            <div className="axiom-navigation__actions push-double--right flex flex-align--center flex-shrink--none">
                {helpUrl && (
                    <Link
                        className="flex flex-align--center"
                        href={helpUrl}
                        onClick={onAppRouteLinkClick}
                        testSection="navigation--help-icon"
                    >
                        <Icon
                            description="center"
                            name="help"
                            fill={theme === "dark" ? "white" : "black"}
                            size="large"
                            style={{
                                alignSelf: "center",
                            }}
                        />
                    </Link>
                )}
            </div>
        </nav>
    );
};

Navigation.propTypes = {
    className: PropTypes.string,
    helpUrl: PropTypes.string,
    homeUrl: PropTypes.string,
    logoUrl: PropTypes.string,
    onHelpClick: PropTypes.func,
    theme: PropTypes.oneOf(["dark", "light"]),
    title: PropTypes.string.isRequired,
};