import React, { Component, PropTypes } from 'react';
import { Popover, Card, CardText, CardHeader, FlatButton, CardActions, CircularProgress, Avatar } from 'material-ui';
import EditorDragHandle from 'material-ui/svg-icons/editor/drag-handle';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import ExpandMore from 'material-ui/svg-icons/navigation/expand-more';
import ExpandLess from 'material-ui/svg-icons/navigation/expand-less';
import UCdefaultTheme from '../../themes/DefaultTheme';

class Pagelet extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      expanded: props.expanded !== undefined ? props.expanded : true,
    };

    this.handleOpen = this.handleOpen.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  getChildContext() {
    const theme = getMuiTheme(UCdefaultTheme);

    return {
      muiTheme: theme,
    };
  }

  handleOpen(event) {
    const eventPayload = {
      category: 'Pagelet Interaction',
      action: 'Clicked Help',
      label: `for ${this.props.title}`,
    };
    this.props.ReactGA.event(eventPayload);
    // https://github.com/callemall/material-ui/issues/3335
    event.preventDefault();

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

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

  handleExpandChange = (expanded) => {
    const eventPayload = {
      category: 'Pagelet Interaction',
      action: `Toggled ${this.props.title}`,
      label: expanded ? 'open' : 'closed',
    };
    this.props.ReactGA.event(eventPayload);
    this.props.togglePagelet(this.props.title, expanded);
    this.setState({ expanded });
  };

  render() {
    let helpButton = null;
    if (this.props.showInfo) {
      helpButton = (
        <FlatButton
          onTouchTap={this.handleOpen}
          label="help"
        />
      );
    }

    const fetchingIcon = (
      <CircularProgress
        mode="indeterminate"
        value={50}
        color="white"
        size={20}
        thickness={2}
      />
    );

    const avatar = this.props.draggable ? (
      <Avatar
        backgroundColor={'#333333'}
        color={'#FFFFFF'}
        size={20}
        icon={<EditorDragHandle />}
      />
    ) : null;

    return (
      <div
        className="ih-paglet"
        style={{
          paddingTop: this.state.isHovered ? 300 : 0,
        }}
      >
        <Card
          expanded={this.state.expanded}
          onExpandChange={this.handleExpandChange}
        >
          <CardHeader
            avatar={avatar}
            title={this.props.title}
            style={{ backgroundColor: '#333' }}
            titleStyle={{ color: '#FFF' }}
            actAsExpander={this.props.expandable}
            showExpandableButton={this.props.expandable || this.props.isFetching}
            openIcon={this.props.isFetching ? fetchingIcon : <ExpandLess size={20} color={'#FFF'} />}
            closeIcon={this.props.isFetching ? fetchingIcon : <ExpandMore size={20} color={'#FFF'} />}
          />
          <CardText expandable={this.props.expandable} style={{ display: this.props.isFetching ? 'none' : 'block' }}>
            <div className="ih-pagelet-body">{this.props.children}</div>
          </CardText>
          <CardActions expandable={this.props.expandable} style={{ display: this.props.isFetching ? 'none' : 'block' }}>
            {helpButton}
          </CardActions>
        </Card>
        <Popover
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
          targetOrigin={{ horizontal: 'right', vertical: 'top' }}
          onRequestClose={this.handleClose}
          zDepth={2}
        >
          <div style={{ padding: '10px', maxWidth: '275px', textAlign: 'justified' }}>
            {this.props.infoText}
            {this.props.infoTextObj}
          </div>
        </Popover>
      </div>
    );
  }
}

Pagelet.propTypes = {
  expanded: PropTypes.bool,
  children: PropTypes.node,
  title: PropTypes.string,
  infoText: PropTypes.string,
  infoTextObj: PropTypes.object,
  showInfo: PropTypes.bool,
  isFetching: PropTypes.bool,
  expandable: PropTypes.bool,
  draggable: PropTypes.bool,
  togglePagelet: PropTypes.func,
};

Pagelet.defaultProps = {
  expandable: true,
  draggable: true,
  togglePagelet: () => {},
  ReactGA: { event: () => {} },
};

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

export default Pagelet;