import React from 'react';
import axios from 'axios';
import { baseUrl } from '../../../../../containers/UserInfo/Partials/UserInfoView/node_modules/Config../../../containers/UserInfo/node_modules/Config';
import { Link } from "../../../../../containers/UserInfo/Partials/UserInfoView/node_modules/Components/Sessionr-dom";
import Session from '../../../../../containers/UserInfo/Partials/LoginView/node_modules/Components/Session';
import { ServiceRequest } from 'ServiceRequest';
import SubMenu from './Partials/SubMenu';

const LiMenuSubMenu = ({ id, imagen, url, nombre, nombreCorto, lstMenu }) => (
     <li className="dropdown">
        <a className="dropdown-toggle" data-toggle="dropdown" href="#">
            <i className={imagen} />{nombreCorto} <span className="caret" />
        </a>
        <SubMenu lstMenu={lstMenu} IdMenuPadre={id} />
    </li>
);
class MainMenu extends React.Component {

    signal = axios.CancelToken.source();
    
    constructor(props) {
        super(props);
        this.state = {
            Usuario: '',
            MenuItems: [],
            isFull: false
        };                
        this.toggleNavbar = this.toggleNavbar.bind(this);        
    }
    
    toggleNavbar() {
        const { toggleNavbar } = this.props;
        toggleNavbar();              
    }

    componentWillUnmount(){
        this.signal.cancel('La solicitud ha sido cancelada por el usuario.');
    }

    
 toggleFullScreen() {
        var doc = window.document;
        var docEl = doc.documentElement;

        var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
        var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

        if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
            this.setState({ isFull: true });
            requestFullScreen.call(docEl);          
        }
        else {
            this.setState({ isFull: false });
            cancelFullScreen.call(doc);           
        }

    }
    async componentWillMount() {
        
        const session = new Session();
        const Usuario = session.get('Usuario');
        let MenuItems = [];
         let Response = await this.getMenu();
        if (Response.isError==false){
            MenuItems = Response.data
        }
        this.setState({ Usuario, MenuItems });      
    }

    componentDidCatch(error, errorInfo) {
        console.log("getMenu componentDidCatch")
    }

    async  getMenu() {
        try {
            let _Menu = await ServiceRequest.ObtenerMenu(this.signal.token);
           return _Menu;
        } catch (e) {
            console.log("getMenu catch")
            console.log(e)
        }      
    }

  async onCerrarSesion() {
        const respuesta = await ServiceRequest.CerrarSesion();
        if (respuesta.data=='Login'){
            const session = new Session();
            session.remove('Usuario');
            window.location.href = baseUrl;
        }      
    }
    
  render() {
      const { MenuItems, Usuario } = this.state;
      const lstMenu = MenuItems;
      const _lstParents = lstMenu.filter(son => son.PadreID == 0);
      const LiMenuPadre = _lstParents.map((item, index) => {
          let _lsSons = lstMenu.filter(son => son.PadreID == item.ID);          
          if (_lsSons.length > 0) {
              return <LiMenuSubMenu key={index} nombre={item.Nombre} nombreCorto={item.NombreCorto} url={item.Url} imagen={item.Imagen} lstMenu={lstMenu} id={item.ID} />
          } else {              
              return <li key={index} onClick={this.toggleNavbar} ><Link onClick={this.toggleNavbar} to={baseUrl + item.Url}><i className={item.Imagen} />{item.NombreCorto}</Link></li>
          }    
      });
        return (
            <ul className="nav navbar-nav">
                <div className="user-menu-2 visible-xs">
                    <div className="container">
                        <div className="row">                            
                            <div className="col-xs-9">
                                <p>
                                    <span>{Usuario}</span>                                    
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <hr />
                {LiMenuPadre}
               <hr />
                <div className="visible-xs">                    
                    <li><a href="#" onClick={this.onCerrarSesion}><i className="flaticon-logout" />Salir</a></li>
                </div>
                <li className="user-desktop dropdown hidden-xs">
                    <a className="dropdown-toggle" data-toggle="dropdown" href="#">                        
                        {'  ' + this.state.Usuario}
                        <span className="caret" />
                    </a>
                    <div className="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">                        
                        <a className="dropdown-item" href="#" onClick={this.onCerrarSesion}><i className="flaticon-logout" />Salir</a>
                    </div>
                </li>
            </ul>
        )
    }
};

export default MainMenu;