import React, { Component } from 'react';
import { Link } from 'react-router';
import { hasRole, getOrganisationCode } from '../utils/helpers.jsx';

class Header extends Component {
  /** */
  componentDidUpdate() {
    let {
      location
    } = this.props;

    if(location) {
      let menu = 'home';
      if(location.pathname.indexOf('/inter') > -1) {
        menu = 'digital';
      }
      else if(location.pathname.indexOf('/radio') > -1) {
        menu = 'radio';
      }
      else if(location.pathname.indexOf('/tv') > -1) {
        menu = 'tv';
      }

      this.handleActiveClick(menu, null);
    }
  }

  /** */
  handleActiveClick(menu, event) {
    let selector = `*[data-ref='${menu}']`;
    if(window.jQuery) {
      // reset
      $('.main-menu *[data-ref]').removeClass('active');

      // set
      $(selector).addClass('active');
    }
  }

  /** */
  render() {
    let changePassword, allUsersMenu, newUserMenu, menu, username = null;
    let { loggedIn, me, auth } = this.props;

    const isAdmin = hasRole('Admin', me.get('roles'));
    const isInternal = auth.get('isInternalUser') === true;

    if(!isInternal) {
      changePassword = (<li>
        <Link onClick={this.handleActiveClick.bind(this, 'home')}
              activeClassName="active" to="/dashboard/password">Wijzig wachtwoord</Link>
      </li>);
    }

    if (loggedIn && isAdmin && !isInternal) {
      allUsersMenu = (
        <li>
          <Link onClick={this.handleActiveClick.bind(this, 'home')}
                activeClassName="active" to="/dashboard/users">Gebruikers</Link>
        </li>);
      newUserMenu = (
        <li>
          <Link onClick={this.handleActiveClick.bind(this, 'home')}
                activeClassName="active" to="/dashboard/users/create">Nieuwe gebruiker</Link>
        </li>);
    }

    if (loggedIn && me.get('userInfo')) {
      let givenName = me.get('userInfo').firstName;
      if(isInternal) {
        // Azure AD gebruiker
        givenName = auth.get('data').user_data.given_name;

        if(getOrganisationCode()) {
          givenName = `${givenName} [${getOrganisationCode()}]`;
        }
      }

      menu = (<ul className="main-menu">
          <li className="has-portal-dropdown-menu">
            <Link onClick={this.handleActiveClick.bind(this, 'home')}
                  data-ref="home" activeClassName="active" to="/dashboard">
              <i className="menu-icon menu-welkom"></i> Welkom {givenName}
            </Link>
            <ul className="portal-dropdown-menu">
              {changePassword}
              {allUsersMenu}
              {newUserMenu}
              <li>
                <Link activeClassName="active" to="/logout">Uitloggen</Link>
              </li>
            </ul>
          </li>
          <li className="has-portal-dropdown-menu">
            <Link onClick={this.handleActiveClick.bind(this, 'tv')}
                  data-ref="tv" activeClassName="active" to="/campaigns/tv">
              <span className="iconWrapper" dangerouslySetInnerHTML={{__html: window.icon_televisie}} />
              <span className="menuTitle">Televisie</span>
            </Link>
            <ul className="portal-dropdown-menu">
              <li>
                <Link onClick={this.handleActiveClick.bind(this, 'tv')}
                  activeClassName="active" to="/campaigns/tv">Campagnes</Link>
              </li>
              <li>
                <Link onClick={this.handleActiveClick.bind(this, 'tv')}
                  activeClassName="active" to="/contracts/tv">Contracten</Link>
              </li>
              <li>
                <Link onClick={this.handleActiveClick.bind(this, 'tv')}
                  activeClassName="active" to="/invoices/tv">Facturen</Link>
              </li>
            </ul>
          </li>
          <li className="has-portal-dropdown-menu">
            <Link onClick={this.handleActiveClick.bind(this, 'radio')}
                  data-ref="radio" activeClassName="active" to="/campaigns/radio">
              <span className="iconWrapper" dangerouslySetInnerHTML={{__html: window.icon_radio}} />
              <span className="menuTitle">Radio</span>
            </Link>
            <ul className="portal-dropdown-menu">
              <li>
                <Link onClick={this.handleActiveClick.bind(this, 'radio')}
                  activeClassName="active" to="/campaigns/radio">Campagnes</Link>
              </li>
              <li>
                <Link onClick={this.handleActiveClick.bind(this, 'radio')}
                  activeClassName="active" to="/contracts/radio">Contracten</Link>
              </li>
              <li>
                <Link onClick={this.handleActiveClick.bind(this, 'radio')}
                  activeClassName="active" to="/invoices/radio">Facturen</Link>
              </li>
            </ul>
          </li>
          <li className="has-portal-dropdown-menu">
            <Link onClick={this.handleActiveClick.bind(this, 'digital')}
                  data-ref="digital" activeClassName="active" to="/campaigns/inter">
              <span className="iconWrapper" dangerouslySetInnerHTML={{__html: window.icon_digital}} />
              <span className="menuTitle">Digital</span>
            </Link>
            <ul className="portal-dropdown-menu">
              <li>
                <Link onClick={this.handleActiveClick.bind(this, 'digital')}
                  activeClassName="active" to="/campaigns/inter">Campagnes</Link>
              </li>
              <li>
                <Link onClick={this.handleActiveClick.bind(this, 'digital')}
                  activeClassName="active" to="/contracts/inter">Contracten</Link>
              </li>
              <li>
                <Link onClick={this.handleActiveClick.bind(this, 'digital')}
                  activeClassName="active" to="/invoices/inter">Facturen</Link>
              </li>
            </ul>
          </li>
        </ul>);

      username = (
        <div className="right">
          Ingelogd als <span title={`Gebruikers ID: ${me.get('id')}`}>
            {me.get('userInfo').firstName}
          </span>
        </div>);
    }

    return (
      <header className={this.props.className}>
        <nav className="portal-top-bar">
          <section className="portal-top-bar-section">
            {menu}
          </section>
        </nav>
      </header>
      );
  }
}

export default Header;