import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { CognitoState, Logout } from 'react-cognito';

import styles from './Navbar.scss';

import LogoutButton from './LogoutButton';


class Navbar extends Component {

  static propTypes = {
    location: PropTypes.string,
    authState: PropTypes.string,
    user: PropTypes.objectOf(PropTypes.any)
  }

  constructor() {
    super();
    this.state = {
      dropdown: false
    };
  }

  componentWillMount() {
    document.addEventListener('mousedown', this.handleClick, false);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClick, false);
  }

  handleClick = (e) => {
    if (e.target.parentNode.id === 'dropdown-menu' || e.target.parentNode.parentNode.id === 'dropdown-menu') {
      if ([0, 1].includes(e.button)) {
        e.target.click();
        this.setDropdown(false);
      }
      return;
    }

    if (e.target.id === 'dropdown-button' || e.target.parentNode.id === 'dropdown-button') {
      return;
    }

    this.setDropdown(false);
  }

  setDropdown = (bool) => this.setState({ dropdown: bool });

  toggleDropdown = () => this.setState({ dropdown: !this.state.dropdown });

  render() {
    const { location, authState, user } = this.props;

    const overview = (location === '/overview');
    const items = (location.substring(0, 6) === '/items');
    const settings = (location === '/settings');
    const messages = (location === '/messages');

    const username = (authState === CognitoState.LOGGED_IN && user) ? user.getUsername() : 'error';

    const dropdownStyle = (this.state.dropdown)
      ? `${styles.dropdownContent} ${styles.show}`
      : styles.dropdownContent;

    return (
      <nav className={styles.navbar}>
        <div className={styles.navContainer}>
          <div className={styles.navContent}>
            <Link to="/overview" className={overview ? styles.active : ''}>
              {'Overview'}
            </Link>
            <Link to="/items" className={items ? styles.active : ''}>
              {'Taskies'}
            </Link>
            <div className={styles.profile}>
              <a className={styles.toggle} onClick={this.toggleDropdown} id="dropdown-button">
                <span className={styles.username}>{username}</span>
                <i className="fas fa-user" />
              </a>
              <div className={dropdownStyle} id="dropdown-menu">
                <Link to="/messages" className={messages ? styles.active : ''}>
                  {'Messages'}
                  <i className="fas fa-comments" />
                </Link>
                <Link to="/settings" className={settings ? styles.active : ''}>
                  {'Settings'}
                  <i className="fas fa-cog" />
                </Link>
                <Logout>
                  <LogoutButton />
                </Logout>
              </div>
            </div>
          </div>
        </div>
      </nav>
    );
  }

}

const mapStateToProps = (state) => ({
  location: state.router.location.pathname,
  authState: state.cognito.state,
  user: state.cognito.user
});

export default connect(mapStateToProps, null)(Navbar);