/**
 * Copyright (c) 2021 Gitpod GmbH. All rights reserved.
 * Licensed under the GNU Affero General Public License (AGPL).
 * See License-AGPL.txt in the project root for license information.
 */

import { User } from "@gitpod/gitpod-protocol";
import { useContext } from "react";
import { Link } from "react-router-dom";
import gitpodIcon from '../icons/gitpod.svg';
import { gitpodHostUrl } from "../service/service";
import { UserContext } from "../user-context";
import ContextMenu from "./ContextMenu";
import { useLocation } from "react-router";
interface Entry {
    title: string,
    link: string,
    alternatives?: string[]
}

function MenuItem(entry: Entry) {
    const location = useLocation();
    let classes = "flex block text-sm font-medium dark:text-gray-200 px-3 px-0 py-1.5 rounded-md transition ease-in-out";
    const all = [entry.link, ...(entry.alternatives||[])];
    const path = location.pathname.toLowerCase();
    if (all.find( n => n === path || n+'/' === path)) {
        classes += " bg-gray-200 dark:bg-gray-700";
    } else {
        classes += " text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800";
    }
    return <li key={entry.title}>
        {entry.link.startsWith('https://')
            ? <a className={classes} href={entry.link}>
                <div>{entry.title}</div>
            </a>
            : <Link className={classes} to={entry.link}>
                <div>{entry.title}</div>
            </Link>}
    </li>;
}

function Menu(props: { left: Entry[], right: Entry[] }) {
    const { user } = useContext(UserContext);

    return (
        <header className="lg:px-28 px-10 flex flex-wrap items-center py-4">
            <div className="flex justify-between items-center pr-3">
                <Link to="/">
                    <img src={gitpodIcon} className="h-6" />
                </Link>
            </div>
            <div className="flex flex-1 items-center w-auto w-full" id="menu">
                <nav className="flex-1">
                    <ul className="flex flex-1 items-center justify-between text-base text-gray-700 space-x-2">
                        {props.left.map(MenuItem)}
                        <li className="flex-1"></li>
                        {props.right.map(MenuItem)}
                    </ul>
                </nav>
                <div className="ml-3 flex items-center justify-start mb-0 pointer-cursor m-l-auto rounded-full border-2 border-transparent hover:border-gray-200 dark:hover:border-gray-700 p-0.5 font-medium">
                    <ContextMenu menuEntries={[
                    {
                        title: (user && User.getPrimaryEmail(user)) || '',
                        customFontStyle: 'text-gray-400',
                        separator: true
                    },
                    {
                        title: 'Settings',
                        link: '/settings',
                        separator: true
                    },
                    {
                        title: 'Logout',
                        href: gitpodHostUrl.asApiLogout().toString()
                    },
                    ]}>
                        <img className="rounded-full w-6 h-6"
                            src={user?.avatarUrl || ''} alt={user?.name || 'Anonymous'} />
                    </ContextMenu>
                </div>
            </div>
        </header>
    );
}

export default Menu;