import React from 'react';
import { History } from 'react-router';
import reactMixin from 'react-mixin';
import { connect } from 'react-redux';
import { userService } from 'services/';
import classnames from 'classnames';
import { CAN_ACCESS_SQUAWK } from 'utils/session';
import { logout } from 'actions/session';
import { createSelector, createStructuredSelector } from 'reselect';

class SiteHeader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      saving: false,
      saved: false
    };
  }

  logout() {
    const { dispatch } = this.props;
    dispatch(logout());
    this.history.pushState(null, '/login/');
  }

  popoutSquawk() {
    window.open('/squawk.html', '', 'width=400, height=300');
    bzTrack.trackPage('/squawk');
  }

  renderSquawk() {
    const { session } = this.props;
    const canHasSquawk = session.hasPerm(CAN_ACCESS_SQUAWK);

    if (session.isLoggedIn && canHasSquawk) {
      return (
        <button className="appbar__squawk appbar__tool" onClick={() => this.popoutSquawk()}>
          <span className="appbar__tool-text">Squawk</span>
        </button>
      );
    }

    return null;
  }

  render() {
    const { saving, saved } = this.state;
    const { session } = this.props;

    const userClass = classnames('appbar-user session-elem', {'session-hide': !session.isLoggedIn});

    return (
      <section role="banner" className="appbar">
        <img className="appbar__logo" src={require('../assets/images/bzpro-logo.svg')} alt="Profit with faster news and research" />
        <div className={userClass} data-abbrevname={this.props.initials} data-username={this.props.displayName}>
          <div className="appbar-user__img"></div>
          <ul className="appbar-user__dropdown">
            <li className="appbar-user__item" onClick={() => this.history.pushState(null, '/dashboard/preferences/alerts/')}>
              <i className="bzpro-icon-alert"></i>
              <div>Alerts</div>
            </li>
            <li className="appbar-user__item" onClick={() => this.logout()}>
              <i className="bzpro-icon-logout"></i>
              <div>Log Out</div>
            </li>
            <li className="appbar-user__item appbar-user__item--full">
              <a href="//pro-classic.benzinga.com/app/bzlive-updates" target="_blank">Benzinga PRO Classic</a>
            </li>
          </ul>
        </div>
        <span className="appbar__separator"></span>
        {this.renderSquawk()}
        <button className="appbar__tool" onClick={() => this.history.pushState(null, '/dashboard/preferences/alerts/')}>
          <span className="appbar__tool-text">Alerts</span>
        </button>
      </section>
    );
  }
}

SiteHeader.propTypes = {
  dispatch: React.PropTypes.func,
  session: React.PropTypes.object,
  user: React.PropTypes.object,
  displayName: React.PropTypes.string,
  initials: React.PropTypes.string
};

const fullnameSelector = createSelector(
  state => state.session.user,
  user => {
    if (!user.firstname || !user.lastname) {
      return null;
    }
    return user.firstname + ' ' + user.lastname;
  }
);

const displayNameSelector = createSelector(
  state => state.session.user,
  fullnameSelector,
  (user, fullname) => {
    const { username, email } = user;
    return fullname || username || email || 'Not Available';
  }
);

const initialsSelector = createSelector(
  displayNameSelector,
  displayName => {
    const spaceIndex = displayName.indexOf(' ');

    // If no space, just take first two characters.
    if (spaceIndex === -1) {
      return displayName.substring(0, 2);
    }

    return displayName.charAt(0) + displayName.charAt(spaceIndex + 1);
  }
);

const selector = createStructuredSelector({
  session: state => state.session,
  user: state => state.session.user,
  displayName: displayNameSelector,
  initials: initialsSelector
});

reactMixin.onClass(SiteHeader, History);
export default connect(selector)(SiteHeader);