/*
Navigation Menu

@copyright (c) Copyright 2013-2016 Dorian Pula
@license AGPL-1.0
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/


import React from "react";
import {Link} from "react-router";
import {connect} from "react-redux";


class NavigationMenuItem extends React.Component {
    static get propTypes() {
        return {
            title: React.PropTypes.string,
            targetUrl: React.PropTypes.string
        };
    }

    render() {
        return (<li><Link to={ this.props.targetUrl }>{ this.props.title }</Link></li>);
    }
}


class NavigationMenu extends React.Component {
    static get propTypes() {
        return {
            menu: React.PropTypes.arrayOf(
                React.PropTypes.shape({
                    title: React.PropTypes.string,
                    targetUrl: React.PropTypes.url
                })
            )
        };
    }

    render() {
        let navigationMenuItems = [];
        for (let menuItem of this.props.menu) {
            let menuId = `${menuItem.name.toLowerCase()}_${menuItem.url.substring(1, menuItem.url.length)}`;
            // TODO Fix API for application menu.
            let menu = (
                <NavigationMenuItem key={ menuId } title={ menuItem.name } targetUrl={ menuItem.url }/>
            );
            navigationMenuItems.push(menu);
        }

        return (
            <div className="col-lg-2 col-lg-offset-1 ice-menu">
                <nav>
                    <ul className="nav nav-stacked nav-pills">{ navigationMenuItems }</ul>
                </nav>
            </div>
        );
    }
}


const ConnectedNavigationMenu = connect(
    (state) => {
        return {'menu': state.menu};
    }
)(NavigationMenu);

export {ConnectedNavigationMenu};