import React, { Component, PropTypes } from 'react';
import { Popover, IconButton } from 'material-ui';
import LauncherNavigationCollection from '../NavigationCollection/MuiLauncher/MuiLauncher';

export default class LauncherIconPopover extends Component {
  constructor(props) {
    super(props);

    this.state = {
      open: false,
    };
  }

  handleTouchTap(e) {
    this.setState({
      open: true,
      anchorEl: e.currentTarget,
    });
  }

  handleRequestClose() {
    this.setState({
      open: false,
    });
  }

  render() {
    return (
      <div className="icon-wrapper">
        <IconButton tooltip="App Launcher" onTouchTap={this.handleTouchTap.bind(this)}>
          {/* bind(this) causes Lint warning */}
          <AppsIcon />
        </IconButton>
        <Popover
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
          targetOrigin={{ horizontal: 'right', vertical: 'top' }}
          onRequestClose={this.handleRequestClose/* .bind(this) */}
        >
          <LauncherNavigationCollection ncd={this.props.apps} />
        </Popover>
      </div>
    );
  }
}

LauncherIconPopover.propTypes = {
  apps: PropTypes.object.isRequired, // ESLint doesn't like generic objects
};