import React, { Component } from "react";
import { Card, Avatar, Dialog, FlatButton } from "material-ui";

export default class ProfileTile extends Component {
  constructor() {
    super();
    this.state = {
      opened: false
    };
  }

  handleOpen = () => {
    this.setState({ open: true });
  };

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

  render() {
    const actions = [
      <FlatButton label="Cancel" primary={true} onClick={this.handleClose} />,
      <FlatButton
        label="Submit"
        primary={true}
        disabled={true}
        onClick={this.handleClose}
      />
    ];
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center"
        }}
      >
        <span onClick={this.handleOpen}>
          <Avatar size={115} src={"https://baconmockup.com/300/200/"} />
          <div>
            <p style={{ textAlign: "center" }}>
              John Smithison<br />M99999999
            </p>
          </div>
        </span>
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={true}
          open={this.state.open || false}
        >
          Only actions can close this dialog.
        </Dialog>
      </div>
    );
  }
}

//export default ProfileTile;