import { formatMessage } from '@orchard/frontend-localization';
import { LeftNav } from '@orchard/frontend-react-components';
import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import { APP_TITLE } from 'src/constants';
import { ROUTE_ACCOUNT, ROUTE_HOME } from 'src/constants/routes';

const CLASSNAME = 'MainNav';
export const TERM_HOME = 'navigation.home';
export const TERM_ACCOUNT = 'navigation.account';

const MENU_ITEMS = [
    {
        titleTerm: TERM_HOME,
        url: ROUTE_HOME
    },
    {
        titleTerm: TERM_ACCOUNT,
        url: ROUTE_ACCOUNT
    }
];

const MainNav = () => {
    const history = useHistory();
    const { location: { pathname } } = history;
    const [activeUrl, setActiveUrl] = useState(pathname);

    const navigate = (url: string) => {
        setActiveUrl(url);
        history.push(url);
    };

    const menuItems = MENU_ITEMS.map(item => ({
        title: formatMessage(item.titleTerm),
        active: activeUrl === item.url,
        url: item.url
    }));

    return (
        <nav className={CLASSNAME}>
            <LeftNav
                title={APP_TITLE}
                sections={[menuItems]}
                push={navigate}
            />
        </nav>
    );
};
export default MainNav;