import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { Link, useRouteMatch } from 'react-router-dom'
import Navbar from 'react-bootstrap/Navbar'
import { Nav, NavDropdown} from 'react-bootstrap'
import {getCurrentUserMenu} from '../selectors'

import './horizontal-sidebar.styles.scss'
import { menuItems } from './horizontal-sidebar.initial-values'


const HorizontalSidebarComponent = ({ theMenu }) => {
    let { url } = useRouteMatch()
    
    const renderSubItems = (subItems, url) => (
        subItems.map( (theItem, localIndex) => (
            !!theMenu[theItem.id] ?
            <Link key={`s${localIndex}`} className="dropdown-item" to={`${url}/${theItem.linkTo}`}>{theMenu[theItem.id].menu_name}</Link>
            : null
        ))
    )
    
    useEffect(() => {
        console.log('menu render')

    },[theMenu])
    const navBarItemOnSelect = (evtKey, evt) => {
        console.log(evtKey)
        console.log(evt)
    }

    return (
        <div className="container">
            
                <Nav className="d-flex flex-row">                 
                {
                    !!theMenu ? 
                        menuItems.map( (item, index) => {
                             console.log(item.id, ' ==')
                            return !!theMenu[item.id] ?
                                (

                                    !item.isDropDown ? 
                                    (
                                            <Link className="nav-link" key={item.id} to={`${url}/${item.linkTo}`}>
                                                {item.icon}
                                                {theMenu[item.id].menu_name}
                                            </Link>
                                        
                                    ) : (
                                        <NavDropdown key={item.id} title={
                                            <span data-row={index} >
                                                {item.icon}
                                                {theMenu[item.id].menu_name}
                                            </span>
                                        } >                                
                                            {renderSubItems(item.subItems, url)}                                
                                        </NavDropdown>
                                    )
                                )
                                : null                      
                            }

                        )
                    : null
                }                
            </Nav>
        </div>
    )
}

const mapStateToProps = state => ({
    theMenu: getCurrentUserMenu(state)
})
export default connect(mapStateToProps, null)(React.memo(HorizontalSidebarComponent))