import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {
    Collapse,
    Navbar,
    NavbarToggler,
    NavbarBrand,
    Nav,
    NavItem,
    NavLink
} from 'reactstrap';
import {fetchCartCount} from '../../actions/cart/cartActions';
import {resetActiveSubModule} from '../../actions/page/pageActions';
import CartIcon from '../../containers/cart/components/CartIcon.jsx';
import Submenu from './Submenu.jsx';
import './menu.css';
import logoWhite from '../../svg/logoWhite.svg';

class Menu 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.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
       });
    }

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

    componentDidMount() {
        this.props.dispatch(fetchCartCount());
    }

    onModuleClick(moduleName){
        this.props.dispatch(resetActiveSubModule());
        this.props.addActiveClass(moduleName);
    }

    render() {
        const {wiaasModules} = this.props;

        return (
            <div>
                <Navbar id="main-menu-bar" className="navigation-bar" dark expand="md">
                    <NavbarBrand tag={Link} to="/"><img className="logo-image" src={logoWhite} alt="WIAAS" /></NavbarBrand>
                    <NavbarToggler onClick={this.toggle}/>
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="mr-auto" navbar>
                            {
                                (wiaasModules && wiaasModules.modules) &&
                                wiaasModules.modules.filter(this.isInMenu).map((module, index) =>
                                    <NavItem key={index}
                                        id={"nav-button-" + module.url}
                                        className={(this.props.activeModule === module.url) ? "navbar-button active" : "navbar-button"}
                                        onClick={() => this.onModuleClick(module.url)}>
                                        <NavLink tag={Link} to={'/' + module.url}>{module.menuName}</NavLink>
                                    </NavItem>
                                )
                            }
                        </Nav>
                        <Nav className="nav-btn-cart navbar-right" navbar>
                            <NavItem id="nav-button-cart" className="navbar-button">
                                <NavLink tag={Link} to="/cart">
                                    <CartIcon cartCount={this.props.cartCount} />
                                    <span className="fa fa-shopping-cart cart-icon"></span>
                                    <span className="cart-label">Cart</span>
                                </NavLink>
                            </NavItem>
                        </Nav>
                    </Collapse>
                </Navbar>
                <Submenu activeModule={this.props.activeModule}/>
            </div>
        );
    }
}
const mapStateToProps = (state) => ({
    wiaasModules: state.auth.modules,
    cartCount: state.cartReducer.cartCount
});

export default connect(mapStateToProps)(Menu);