import { Mutation, Query } from "react-apollo";
import gql from "graphql-tag";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import DialogTitle from "@material-ui/core/DialogTitle";
import Dialog from "@material-ui/core/Dialog";
import Avatar from "@material-ui/core/Avatar";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemText from "@material-ui/core/ListItemText";
import PersonIcon from "@material-ui/icons/Person";
import AddIcon from "@material-ui/icons/Add";
import blue from "@material-ui/core/colors/blue";

const emails = [
  // can be an object or array - see jsfiddle below
  { name: "ankit", id: "1e1eafa8-ea40-6f43-6541-5c7f539612f2" },
  { name: "rigal", id: "b62b9815-b1c7-dc4a-7539-59a68b95ddf5" }
];
const styles = {
  avatar: {
    backgroundColor: blue[100],
    color: blue[600]
  }
};

const REASSIGN_OPERATIONS = gql`
  mutation todo_operations($id: String, $contact_id_c: String) {
    todo_operations(id: $id, contact_id_c: $contact_id_c) {
      contact_id_c
    }
  }
`;

class UserList extends React.Component {
  state = {
    contactid: ""
  };

  handleClose = () => {
    this.props.onClose(this.props.selectedValue);
  };

  handleListItemClick = value => {
    this.setState({ contactid: value });
    this.props.onClose(value);
  };

  render() {
    const {
      classes,
      onClose,
      selectedValue,
      userTaskId,
      ...other
    } = this.props;

    const changeOwnerQueryVars = {
      id: userTaskId,
      contact_id_c: selectedValue
    };

    return (
      <Dialog
        onClose={this.handleClose}
        aria-labelledby="simple-dialog-title"
        {...other}
      >
        <DialogTitle id="simple-dialog-title">Reassign Task</DialogTitle>
        <div>
          <List>
            {emails.map(email => (
              <ListItem
                button
                onClick={() => this.handleListItemClick(email.id)}
                key={email.id}
              >
                <ListItemAvatar>
                  <Avatar className={classes.avatar}>
                    <PersonIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText primary={email.name} />
              </ListItem>
            ))}
          </List>
        </div>
      </Dialog>
    );
  }
}

UserList.propTypes = {
  classes: PropTypes.object.isRequired,
  onClose: PropTypes.func,
  selectedValue: PropTypes.string,
  userTaskId: PropTypes.string
};

export default withStyles(styles)(UserList, emails);

<div className={classes.width5}>
    <div className={pendingStatusClass}>
      <AssignmentInd
        //onClick={this.handleClickDialogOpen}
        onClick={event => {
          this.handleClickDialogOpen(task.id);
        }}
      />
      <Mutation mutation={COMPLETE_TASK_OPERATIONS}>
        {(todo_operations, { loading, error }) => (
          <UserList
            selectedValue={this.state.selectedValue}
            open={this.state.openreport}
            onClose={this.handleDialogClose}
            userTaskId={this.state.userTaskId}
          />
        )}
      </Mutation>
</div>
</div>