import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {
    Collapse,
    Navbar,
    NavbarToggler,
    Nav,
    NavItem,
    NavLink,
    Dropdown,
    DropdownToggle,
    DropdownMenu,
    DropdownItem
} from 'reactstrap';
import {logout} from '../../actions/login/authActions';
import {setActiveSubModule} from '../../actions/page/pageActions';
import {recieveProfileInfo} from '../../actions/profileSettings/profileSettingsActions';
import CoMarketCatalogSelect from '../../containers/coMarket/components/CoMarketCatalogSelect.jsx';
import {menuTexts} from '../../constants/menuConstants';

const extraSubmenuContent = {
    'co-market': CoMarketCatalogSelect,
    'cart': CoMarketCatalogSelect
};

class Submenu extends Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.toggleSubmenu = this.toggleSubmenu.bind(this);
        this.toggleDropdown = this.toggleDropdown.bind(this);
        this.logoutHandle = this.logoutHandle.bind(this);
        this.state = {
            isOpen: false,
            isSubmenuOpen: false,
            dropdownOpen: false
        };
    }

    toggle() {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }

    toggleSubmenu() {
        this.setState({
            isSubmenuOpen: !this.state.isSubmenuOpen
        });
    }

    toggleDropdown() {
        this.setState({
            dropdownOpen: !this.state.dropdownOpen
       });
    }

    logoutHandle() {
        this.props.dispatch(logout());
        this.props.dispatch(recieveProfileInfo({}));
    };

    isInMenu(module) {
        return parseInt(module.isInMenu, 10) === 1;
    }

    setActiveSubmodule(submoduleName) {
        this.props.dispatch(setActiveSubModule(submoduleName));
    }

    render() {
        const {wiaasModules, userInfo, activeModule, profileInfo, urlParams} = this.props;
        const TagName = extraSubmenuContent[activeModule] || null;

        return (
            <Navbar id="secondary-menu-bar" className="submenu-navigation-bar " light expand="md">
                <NavbarToggler onClick={this.toggleSubmenu}/>
                <Collapse isOpen={this.state.isSubmenuOpen} className="ml-auto submenu-elements" navbar>
                    {
                        (wiaasModules && wiaasModules.subModules && wiaasModules.subModules[activeModule]) &&
                        <Nav className="mr-auto submenu-navbar" navbar>
                            { wiaasModules.subModules[activeModule].map((subModule, index) =>
                                <NavItem key={index}
                                    id={"nav-submodule-button-" + subModule.url}
                                    onClick={() => this.setActiveSubmodule(subModule.url)}
                                    className="navbar-button">
                                    <NavLink tag={Link} to={'/' + subModule.url}>{subModule.menuName}</NavLink>
                                </NavItem>
                            )}
                            <NavItem></NavItem>
                        </Nav>
                    }
                    {
                        TagName && <TagName idCommercialLead={parseInt(urlParams.idCommercialLead, 10)} activeModule={activeModule}/>
                    }
                    <Nav className="ml-auto navbar-right" navbar>
                        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggleDropdown}>
                            <DropdownToggle id="nav-logout-expand" nav caret>
                              { profileInfo && profileInfo.name
                                  ? profileInfo.name
                                  : userInfo && userInfo.wiaas_user_full_name
                              }
                            </DropdownToggle>
                            <DropdownMenu right>
                                <DropdownItem>
                                    <NavLink id="nav-profile" tag={Link} to='/profileSettings'>{menuTexts.buttons.Profile} <i className="fa fa-cog"></i></NavLink>
                                </DropdownItem>
                                <DropdownItem>
                                    <NavLink id="nav-logout" tag={Link} to='/' onClick={this.logoutHandle}>{menuTexts.buttons.Logout} <i className="fa fa-sign-out"></i></NavLink>
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </Nav>
                </Collapse>
            </Navbar>
        );
    }
}
const mapStateToProps = (state) => ({
    wiaasModules: state.auth.modules,
    userInfo: state.auth.userInfo,
    profileInfo: state.profileSettingsReducer.profileInfo,
    urlParams: state.pageReducer.urlParams
});

export default connect(mapStateToProps)(Submenu);