'use strict'
import * as React from 'react'

export interface MenuBarProps {
    isLoggedIn: boolean
};

export interface MenuItem {
    onClick: () => void
    text: string
};

export default function MenuBar (props: MenuBarProps): JSX.Element {
    const isLoggedIn = props.isLoggedIn
    const menuItems: MenuItem[] = []
    fillMenu(menuItems, isLoggedIn)
    return (
        <nav className="menu-bar">
            {
                menuItems.map((item, i) => <a key={i} href="#" onClick={item.onClick}>{item.text}</a>)
            }
        </nav>
    )
}

function fillMenu (menuItems: MenuItem[], isLoggedIn: boolean): void {
    if (isLoggedIn) {
        menuItems.push({
            text: 'Cerrar Sesión',
            onClick: () => { alert('logout') }
        })
        return
    }
    menuItems.push({
        text: 'Regístrate',
        onClick: () => { alert('register') }
    })
    menuItems.push({
        text: 'Inicia Sesión',
        onClick: () => { alert('login') }
    })
}