import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import classnames from 'classnames';
import { logout } from 'actions/session';
import { CAN_ACCESS_BZPRO } from 'utils/session';

class Navbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      navopen: false
    };
  }

  toggleNav() {
    const { navopen } = this.state;

    return this.setState({navopen: !navopen});
  }

  pageClass(page) {
    if (this.props.page === page) {
      return 'navbar-inner-links-active';
    }
    return '';
  }

  userStatus() {
    const { session, dispatch, page } = this.props;
    let userAction = (<Link to="/login/">Log in</Link>);
    let userLink = (<Link to="/pricing/" className="button button-green">Start Free Trial</Link>);

    if (page === 'pricing') {
      userLink = null;
    }

    if (session.isLoggedIn) {
      userAction = (<span onClick={() => dispatch(logout())}>Log Out</span>);
      if (session.hasPerm(CAN_ACCESS_BZPRO)) {
        userLink = (<Link to="/dashboard/" className="button button-green">Launch Platform</Link>);
      }
    }
    return (
      <div className="navbar-inner-user">
        {userAction}
        {userLink}
      </div>
    );
  }

  render() {
    const navClasses = classnames('navbar', {'navbar-scrolled': this.props.scrolled, 'navbar-open': this.state.navopen});

    return (
      <div className={navClasses}>
        <div className="navbar-burger" onClick={() => this.toggleNav()}>
          <span className="navbar-burger-slice"></span>
          <span className="navbar-burger-slice"></span>
          <span className="navbar-burger-slice"></span>
        </div>
        <section className="responsive">
          <div className="navbar-inner">
            <div className="navbar-inner-logo">
              <Link to="/">
                <span className="u-visuallyHidden">Benzinga Pro. Profit With Faster News and Research</span>
              </Link>
            </div>
            <ul className="navbar-inner-links">
              <li><Link className={this.pageClass('index')} to="/">Home</Link></li>
              <li><Link className={this.pageClass('squawk')} to="/squawk/">Squawk</Link></li>
              <li><Link className={this.pageClass('calendar')} to="/calendar/">Calendars</Link></li>
              <li><Link className={this.pageClass('pricing')} to="/pricing/">Pricing</Link></li>
              <li><a href="http://cloud.benzinga.com/" target="_blank">Licensing</a></li>
            </ul>
            {this.userStatus()}
            <div className="navbar-inner-phone">
              <a href="tel:+8774409464">877-440-9464</a>
            </div>
          </div>
        </section>
      </div>
    );
  }
}

function selectSession(state) {
  return {
    session: state.session
  };
}

Navbar.propTypes = {
  scrolled: React.PropTypes.bool,
  page: React.PropTypes.string,
  session: React.PropTypes.object,
  dispatch: React.PropTypes.func,
  params: React.PropTypes.object
};

export default connect(selectSession)(Navbar);