import React, { Component, PropTypes } from 'react';
import { Popover, Menu, MenuItem } from 'material-ui';
import MenuIcon from 'material-ui/svg-icons/navigation/menu';
import Spacing from 'material-ui/styles/spacing';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import UCdefaultTheme from '../../themes/DefaultTheme';

export default class BrandBarMenu extends Component {

  constructor() {
    super();
    this.state = { open: false };
    this.handleClose = this.handleClose.bind(this);
    this.handleToggle = this.handleToggle.bind(this);
  }

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

  handleToggle(event) {
    event.preventDefault();
    this.setState({
      open: true,
      anchorEl: event.currentTarget,
    });
  }

  handleClose() {
    this.setState({ open: false });
  }

  render() {
    if (!this.props.tabs) {
      return null;
    }

    const tabs = this.props.tabs;
    const tabMenuItems = tabs.map((tab, index) =>
      <MenuItem
        primaryText={tab.title}
        href={tab.url}
        key={index}
        onTouchTap={this.handleClose}
      />,
    );

    return (
      <div>
        <MenuIcon
          className="brandbar-tabmenu"
          onTouchTap={this.handleToggle}
        />
        <Popover
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
          targetOrigin={{ horizontal: 'left', vertical: 'top' }}
          onRequestClose={this.handleClose}
          useLayerForClickAway
          canAutoPosition={false}
          autoCloseWhenOffScreen={false}
        >
          <Menu
            maxHeight={2000}
            style={{ width: 200 }}
          >
            {tabMenuItems}
          </Menu>
        </Popover>
      </div>
    );
  }
}

BrandBarMenu.propTypes = {
  tabs: PropTypes.array, // ESLint doesn't like generic PropTypes
};

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