import React from 'react';
import LocalStorage from '../../../containers/UserInfo/Partials/UserInfoView/node_modules/Components/LocalStoragerInfo/Partials/LoginView/node_modules/Components/LocalStorage';
import MainMenu from './Partials/MainMenu';

class TopBar extends React.Component {
    static defaultProps = {
        dataMain: {title:''}
    }
      constructor() {
        super();
        this.state = {
            empresaNombre: '',
            sucursalNombre: '',
            despachoNombre: '',
            collapsed: true
        };
    }
    
    toggleNavbar() {        
        this.setState({
            collapsed: !this.state.collapsed
        });              
        $('#navbar-brand-centered').collapse("toggle");                           
    }
           
    componentWillMount() {
        const localStorage = new LocalStorage();
        let sucursalNombre = localStorage.get('SucursalNombre');
        let empresaNombre = localStorage.get('EmpresaNombre');
        let despachoNombre = localStorage.get('DespachoNombre');
         
        this.setState({ empresaNombre, sucursalNombre, despachoNombre });
      }
    render() {
        const { empresaNombre, sucursalNombre, despachoNombre} = this.state;
        return (
            <div>
                <div className="hidden-xs info-empresa">
                    <div className="container">
                        <p>{empresaNombre}</p>
                        <p>{sucursalNombre}</p>
                        <p>{despachoNombre}</p>
                    </div>
                </div>
                
                <nav className="navbar navbar-default" role="navigation">                    
                    <div className="container">
                        <div className="navbar-header">                            
                            <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                                <span className="sr-only">Toggle navigation</span>
                                <span className="icon-bar" />
                                <span className="icon-bar" />
                                <span className="icon-bar" />
                            </button>
                            <div className="visible-xs">
                                <h4>CONSULTA</h4>
                            </div>
                        </div>
                        <div className="navbar-collapse collapse" id="navbar-brand-centered">
                            <MainMenu
                                toggleNavbar={this.toggleNavbar.bind(this)}
                                empresaNombre={empresaNombre}
                                sucursalNombre={sucursalNombre}
                                despachoNombre={despachoNombre} />
                        </div>
                    </div>
                </nav>
            </div>
        )
    }
};

export default TopBar;