import React from 'react';
import LinkManager from 'modularity-front';
import Modularity from 'modularity-front';
import { Button } from 'react-materialize';

import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';

import './VerticalNavbar.css';

let Module = Modularity.Module;
let Link = LinkManager.Modules.Link;

class VerticalNavbar extends Modularity.Module {
    constructor(props){
        super(props);
        this.state = {
        }
    }

    render() {
        let selectedNavItem = "home";
        let url = this.RoutingSystem.getRoute().url;
        let navitems = this.NavItems.value.map((item, indx) => {
            if( url.includes(item.link) ) {
                selectedNavItem = item.link
            }

            return <NavItem key={item.text + item.link} eventKey={item.link}>
                <NavIcon>
                    <i className={"fa fa-fw " + item.icon} style={{ fontSize: '1.75em' }} />
                </NavIcon>
                <NavText>
                    {item.text}
                </NavText>
            </NavItem>
        })



        return(
           <SideNav
                onSelect={(eventKey, event) => {
                    this.CoreSystem.go(eventKey);
                }}
                defaultExpanded={this.Expanded.value}
            >
                <SideNav.Nav selected={selectedNavItem}>
                    {navitems}
                </SideNav.Nav>
                {super.render(false)}
            </SideNav>
        );
    }
}

VerticalNavbar.Inputs = {
    Expanded: {
        type: Module.Types.Boolean, 
        defaultValue: true
    },
    NavItems: {
        type:Module.Types.Array,
        defaultValue:[
            {
                link:"home",
                text:"Home",
                icon:"fa-home",
            },
            {
                link:"products",
                text:"Products",
                icon:"fa-product",
            },
            {
                link:"products",
                text:"Products",
                icon:"fa-product",
            }
        ],
        arrType:Module.Types.Object
    }
}


VerticalNavbar.Category  = "sxoinas";
VerticalNavbar.EditPosition  = "center";
export default VerticalNavbar;



