import React from 'react';
import reactMixin from 'react-mixin';
import { History, Link, IndexLink } from 'react-router';
import classnames from 'classnames';

class Preferences extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
    };
  }

  getActivePage() {
    const path = this.props.location.pathname;
    return path.replace('/', '');
  }

  getPageTitle() {
    switch (this.getActivePage()) {
    case 'alerts':
      return 'Alerts';
    case 'billing':
      return 'Billing Info';
    case 'store':
      return 'Store';
    default:
      return 'Account Settings';
    }
  }

  backgroundClick(e) {
    if (e.target === this.refs.background) {
      this.close();
    }
  }

  close() {
    this.history.pushState(null, '/dashboard/');
  }

  isActivePage(page) {
    return this.getActivePage() === page;
  }

  render() {
    return (
      <div className="preferences" ref="background" onClick={(e) => this.backgroundClick(e)}>
        <div className="preferences-container" ref="container">
          <section className="preferences-body">
            <div className="preferences-body-bar">
              <div className="preferences-body-bar__title">{this.getPageTitle()}</div>
              <div className="preferences-body-bar__close"><i className="bzpro-icon-close" onClick={() => this.close()} /></div>
            </div>
            {this.props.children}
          </section>
        </div>
      </div>
    );
  }
}

Preferences.propTypes = {
  children: React.PropTypes.object,
  location: React.PropTypes.object
};
reactMixin.onClass(Preferences, History);
export default Preferences;