import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import { withRouter } from "react-router-dom";
import compose from "recompose/compose";
import { Input, InputLabel } from "@material-ui/core";
import InputAdornment from "@material-ui/core/InputAdornment";
import FormControl from "@material-ui/core/FormControl";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import AccountCircle from "@material-ui/icons/AccountCircle";
import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import Button from "@material-ui/core/Button";
import TextareaAutosize from "@material-ui/core/TextareaAutosize";
import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
import BusinessIcon from "@material-ui/icons/Business";
import Fab from "@material-ui/core/Fab";
import EditIcon from "@material-ui/icons/Edit";
import Paper from "@material-ui/core/Paper";
import CardMedia from "@material-ui/core/CardMedia";

import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
import Avatar from "react-avatar";

const styles = theme => ({
  margin: {
    margin: theme.spacing(1)
  }
});

class Profile extends Component {
  render() {
    const { classes } = this.props;

    return (
      <div className="row center">
        <div className="row mt-2 mb-2">
          <h2>โปรไฟล์</h2>
        </div>
        <br />
        <div className="row mt-2 mb-2">
          <div className="col s12 m6 l4">
            <div className="row center">
              <br />
              <Avatar
                skypeId="sitebase"
                src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQZeSPYraiTcEz6JxyXy8ITsaGldAqDjX6860m7eCpYhYeQDQkL"
                size="200"
                round={true}
              />
            </div>
            <div className="row center">
              <Button variant="outlined" color="primary">
                <PhotoCameraIcon />
                แก้ไขรูปโปรไฟล์
              </Button>
            </div>
          </div>
          <div className="col s12 m6 l8">
            <br />
            <div ClassName="row">
              <TextField
                className={classes.margin}
                id="name"
                label="ชื่อ-นามสกุล"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <AccountCircle />
                    </InputAdornment>
                  )
                }}
              />

              <TextField
                className={classes.margin}
                id="email"
                label="E_mail"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <MailOutlineIcon />
                    </InputAdornment>
                  )
                }}
              />
            </div>
            <br></br>
            <div>
              <TextField
                className={classes.margin}
                id="password1"
                label="Password"
                type="password"
                autoComplete="current-password"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <VpnKeyIcon />
                    </InputAdornment>
                  )
                }}
              />

              <TextField
                className={classes.margin}
                id="password2"
                label="Confirm-Password"
                type="password"
                autoComplete="current-password"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <VpnKeyIcon />
                    </InputAdornment>
                  )
                }}
              />
            </div>
            <br></br>
            <div>
              <TextField
                className={classes.margin}
                id="address"
                label="ที่อยู่"
                autoComplete="address"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <BusinessIcon />
                    </InputAdornment>
                  )
                }}
              />
              <TextField
                className={classes.margin}
                id="tel"
                label="เบอร์โทร"
                autoComplete="Phone number"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <ContactPhoneIcon />
                    </InputAdornment>
                  )
                }}
              />
            </div>
            <br></br>

            <div className="row">
              <div className={classes.root}>
                <Button variant="contained" color="secondary">
                  ยกเลิก
                </Button>{" "}
                &nbsp; &nbsp; &nbsp;
                <Button variant="contained" color="primary">
                  ตกลง
                </Button>
                &nbsp; &nbsp; &nbsp;
                <Fab color="secondary" aria-label="edit">
                  <EditIcon />
                </Fab>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default compose(withStyles(styles), withRouter)(Profile);
