import React from 'react'
import { connect } from 'react-redux'
import {getCurrentUserMenu} from '../selectors'
import { Link, useRouteMatch } from 'react-router-dom'
import CloseButton from 'react-bootstrap/CloseButton'
import { Nav, NavDropdown} from 'react-bootstrap'
import { menuItems } from '../horizontal-sidebar/horizontal-sidebar.initial-values'
import {setSidebarState} from '../../../redux/user/user.action'
import './vertical-side.styles.scss'


const VerticalSidebarComponent = ({
    //properties
    theMenu, 
    //dispatchers
    toggleSidebar,
    ...props}) => {
    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}`} onClick={toggleSidebar}>{theMenu[theItem.id].menu_name}</Link>:
            null
        ))
    )
    return (
        <>
        <div className="bg-dark p-3 close-container">
            <CloseButton variant="white" className="close-bigger" onClick={toggleSidebar}/>            
        </div>
        
        <Nav className="flex-column" >                 
                {
                    !!theMenu ? 
                    
                    menuItems.map( (item, index) => {
                        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>
        </>
    )
}


const mapStateToProps = state => ({
    theMenu: getCurrentUserMenu(state)
})

const mapDispatchToProps = (dispatch) => ({
    toggleSidebar: () => dispatch(setSidebarState()),    
  })

export default connect(mapStateToProps, mapDispatchToProps)(VerticalSidebarComponent)