import React, { Component, PropTypes } from 'react';
import { AppBar, /* Colors, */ IconButton, Popover } from 'material-ui';
import { white } from 'material-ui/styles/colors';
import AccountCircleIcon from 'material-ui/svg-icons/action/account-circle';
import AppsIcon from 'material-ui/svg-icons/navigation/apps';
import FindInPageIcon from 'material-ui/svg-icons/action/find-in-page';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import NotificationsActiveIcon from 'material-ui/svg-icons/social/notifications-active';
import NotificationsNoneIcon from 'material-ui/svg-icons/social/notifications-none';
import Spacing from 'material-ui/styles/spacing';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import BrandBarMenu from './BrandBarMenu';
import UCdefaultTheme from '../../themes/DefaultTheme';
import DropDownLauncher from './DropDownLauncher';
import LogoImage from './images/BrandLogoDesktop.png';
import MobileLogo from './images/BrandLogoMobile.png';
import Notifications from '../Notifications/Notifications';
import Profile from '../Profile/Profile';
import UCIDLookup from '../UCIDLookup/UCIDLookup';
import './BrandBar.css';


export default class BrandBar extends Component {
  constructor() {
    super(...arguments);

    this.state = {
      lookupOpen: false,
      profileOpen: false,
      appsOpen: false,
      notificationOpen: false,
    };

    this.iconStyle = { margin: '0px 0px 0px 0px', cursor: 'pointer' };
    this.anchorStyle = { horizontal: 'right', vertical: 'bottom' };
    this.targetStyle = { horizontal: 'right', vertical: 'top' };

    this.showLookupDialog = this.showLookupDialog.bind(this);
    this.closeLookupDialog = this.closeLookupDialog.bind(this);

    this.getNotificationImage = this.getNotificationImage.bind(this);

    this.onTouchTapNotifications = this.onTouchTapNotifications.bind(this);
    this.onTouchTapLauncher = this.onTouchTapLauncher.bind(this);
    this.onTouchTapProfile = this.onTouchTapProfile.bind(this);

    this.onCloseNotifications = this.onCloseNotifications.bind(this);
    this.onCloseLauncher = this.onCloseLauncher.bind(this);
    this.onCloseProfile = this.onCloseProfile.bind(this);
  }

  getChildContext() {
    const theme = getMuiTheme(UCdefaultTheme);
    theme.appBar.textColor = 'black';
    theme.appBar.color = white;
    theme.appBar.spacing = Spacing.desktopSubheaderHeight;
    return {
      muiTheme: theme,
    };
  }

  onTouchTapNotifications(event) {
    event.preventDefault();

    if (this.props.onTouchTapNotifications) {
      this.props.onTouchTapNotifications(event);
    }

    this.setState({
      notificationOpen: true,
      notificationAnchorEl: event.currentTarget,
    });
  }

  onTouchTapLauncher(event) {
    event.preventDefault();

    if (this.props.onTouchTapLauncher) {
      this.props.onTouchTapLauncher(event);
    }

    this.setState({
      appsOpen: true,
      appsAnchorEl: event.currentTarget,
    });
  }

  onTouchTapProfile(event) {
    event.preventDefault();

    if (this.props.onTouchTapProfile) {
      this.props.onTouchTapProfile(event);
    }

    this.setState({
      profileOpen: true,
      profileAnchorEl: event.currentTarget,
    });
  }

  onCloseNotifications() {
    this.setState({
      notificationOpen: false,
    });
  }

  onCloseLauncher() {
    this.setState({
      appsOpen: false,
    });
  }

  onCloseProfile() {
    this.setState({
      profileOpen: false,
    });
  }

  /**
   * Three states to icon( no events, events, unread events)
   * @return {string} name of the font icon
   */
  getNotificationImage() {
    if (this.props.events && this.props.events.unreadEventsCount > 0) {
      return (<NotificationsActiveIcon style={this.iconStyle} />);
    }

    if (this.props.events && this.props.events.totalEventsCount > 0) {
      return (<NotificationsIcon style={this.iconStyle} />);
    }

    return (<NotificationsNoneIcon style={this.iconStyle} />);
  }

  closeLookupDialog() {
    this.setState({ lookupOpen: false });
  }

  showLookupDialog() {
    this.setState({ lookupOpen: true });
  }

  renderUCIDLookupIcon() {
    if (this.props.hideUCIDLookup) {
      return (null);
    }

    return (
      <div className="icon-wrapper">
        <IconButton
          className="brandbar-ucid-lookup"
          tooltip="UC ID Lookup"
          onTouchTap={this.showLookupDialog}
        >
          <FindInPageIcon style={this.iconStyle} />
        </IconButton>
      </div>
    );
  }

  renderNotificationsIcon() {
    if (this.props.hideNotifications) {
      return (null);
    }

    return (
      <div className="icon-wrapper">
        <IconButton
          className="brandbar-notifications"
          tooltip="Notifications"
          onTouchTap={this.onTouchTapNotifications}
        >
          {this.getNotificationImage()}
        </IconButton>
        <Popover
          open={this.state.notificationOpen}
          anchorEl={this.state.notificationAnchorEl}
          anchorOrigin={this.anchorStyle}
          targetOrigin={this.targetStyle}
          onRequestClose={this.onCloseNotifications}
          zDepth={2}
          useLayerForClickAway
          canAutoPosition={false}
          autoCloseWhenOffScreen={false}
        >
          <Notifications
            ref="notifications"
            events={this.props.events}
            changeReadStatus={this.props.changeReadStatus}
          />
        </Popover>
      </div>
    );
  }

  renderDropdownLauncherIcon() {
    if (this.props.hideLauncher) {
      return (null);
    }

    return (
      <div className="icon-wrapper">
        <IconButton
          className="brandbar-launcher"
          tooltip="App Launcher"
          onTouchTap={this.onTouchTapLauncher}
        >
          <AppsIcon style={this.iconStyle} />
        </IconButton>
        <Popover
          open={this.state.appsOpen}
          anchorEl={this.state.appsAnchorEl}
          anchorOrigin={this.anchorStyle}
          targetOrigin={this.targetStyle}
          onRequestClose={this.onCloseLauncher}
          zDepth={2}
          useLayerForClickAway
          canAutoPosition={false}
          autoCloseWhenOffScreen={false}
        >
          <DropDownLauncher launcherData={this.props.launcherData} />
        </Popover>
      </div>
    );
  }

  renderProfileIcon() {
    return (
      <div className="icon-wrapper">
        <IconButton
          className="brandbar-profile"
          tooltip="Profile"
          onTouchTap={this.onTouchTapProfile}
        >
          <AccountCircleIcon style={this.iconStyle} />
        </IconButton>
        <Popover
          open={this.state.profileOpen}
          anchorEl={this.state.profileAnchorEl}
          anchorOrigin={this.anchorStyle}
          targetOrigin={this.targetStyle}
          onRequestClose={this.onCloseProfile}
          zDepth={2}
          useLayerForClickAway
          canAutoPosition={false}
          autoCloseWhenOffScreen={false}
        >
          <Profile
            profileData={this.props.profileData}
            updateProfileUrl={this.props.updateProfileUrl}
            privacySettingsUrl={this.props.privacySettingsUrl}
            logoutUrl={this.props.logoutUrl}
          />
        </Popover>
      </div>
    );
  }

  render() {
    const appbarHeader = (
      <a className="brandbar-dropdown-space brandbar-logo" href={this.props.homeUrl} role="button">
        <img src={LogoImage} className="header__logo--mobile" alt="University of Cincinnati" />
        <img src={MobileLogo} className="header_logoicon_mobile" alt="University of Cincinnati" />
      </a>
    );
    const { pathname, hash, search } = window.location;
    const currentTab = this.props.tabs.findIndex(tab => (
      tab.url === (pathname + search + hash.split('?')[0])
    ));

    const leftIcons = (
      <BrandBarMenu tabs={this.props.tabs} />
    );

    const rightIcons = (
      <div className="brandbar-dropdown-space">
        { this.renderUCIDLookupIcon() }
        { this.renderNotificationsIcon() }
        { this.renderDropdownLauncherIcon() }
        { this.renderProfileIcon() }
        <a className="brandbar-logout" href={this.props.logoutUrl}>
          <span>Logout</span>
        </a>
      </div>
    );

    return (
      <AppBar
        style={{ zIndex: 1 }}
        className={this.props.className}
        title={appbarHeader}
        iconElementLeft={leftIcons}
        iconElementRight={rightIcons}
        zDepth={typeof this.props.zDepth === 'undefined' ? 1 : this.props.zDepth}
      >
        {this.props.children}
        <UCIDLookup
          open={this.state.lookupOpen}
          fetchUCID={this.props.fetchUCID}
          lookupData={this.props.lookupData}
          closeLookupDialog={this.closeLookupDialog}
        />
      </AppBar>
    );
  }
}

BrandBar.defaultProps = {
  className: 'ih-appbar',
};

BrandBar.propTypes = {
  children: React.PropTypes.node,
  className: React.PropTypes.string,
  tabs: PropTypes.array,
  events: PropTypes.object,
  changeReadStatus: PropTypes.func,
  onTouchTapNotifications: PropTypes.func,
  launcherData: PropTypes.object,
  onTouchTapLauncher: PropTypes.func,
  profileData: PropTypes.object,
  onTouchTapProfile: PropTypes.func,
  updateProfileUrl: PropTypes.string,
  privacySettingsUrl: PropTypes.string,
  logoutUrl: PropTypes.string,
  homeUrl: PropTypes.string,
  lookupData: PropTypes.object,
  fetchUCID: PropTypes.func,
  hideUCIDLookup: PropTypes.bool,
  hideNotifications: PropTypes.bool,
  hideLauncher: PropTypes.bool,
  zDepth: PropTypes.number,
};

BrandBar.childContextTypes = {
  muiTheme: PropTypes.object,
};