import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import compose from "recompose/compose";
import { withRouter } from "react-router-dom";
import {
  Input,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  InputLabel,
  InputAdornment,
  FormControl,
  TextField,
  Grid,
  Button,
  TextareaAutosize,
  Fab,
  Paper,
  CardMedia,
  MenuItem,
  Snackbar
} from "@material-ui/core";
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 ContactPhoneIcon from "@material-ui/icons/ContactPhone";
import BusinessIcon from "@material-ui/icons/Business";
import EditIcon from "@material-ui/icons/Edit";
import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
import PostAddIcon from "@material-ui/icons/PostAdd";
import CancelIcon from "@material-ui/icons/Cancel";
import axios from "axios";
import MuiAlert from "@material-ui/lab/Alert";
import Avatar from "react-avatar";

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

  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(1),
      marginTop: theme.spacing(2),
      width: "100%"
    }
  }
});

const currencies = [
  {
    value: "1",
    label: "    กรุณาเลือกประเภท     "
  },
  {
    value: "2",
    label: "สปาและนวด"
  },
  {
    value: "3",
    label: "ผิวหน้า"
  },
  {
    value: "4",
    label: "ขนตาและคิ้ว"
  },
  {
    value: "5",
    label: "ทำเล็บ"
  },
  {
    value: "6",
    label: "ชาลอน"
  },
  {
    value: "7",
    label: "แต่งหน้าทำผม"
  }
];

class Datashop extends Component {
  state = {
    currency: "1",
    name: "",
    nameeng: "",
    timeopen: "",
    timeclose: "",
    tel: "",
    address: "",
    detail: "",
    images: "",
    map: "",
    facebook: "",
    type: "",
    promotion: "",
    open: false
  };
  handleClickOpen = () => {
    this.setState({
      open: true
    });
  };
  handleClose = () => {
    this.setState({
      open: false
    });
  };
  handleChange = event => {
    console.log("name : ", event.target.name);
    console.log("value : ", event.target.value);

    this.setState({
      [event.target.name]: event.target.value
    });
  };
  // handleChange = event => {
  //   this.setState({
  //     currency: event.target.value
  //   });
  // };

  render() {
    const { classes } = this.props;
    const {
      currency,
      name,
      nameeng,
      timeopen,
      timeclose,
      tel,
      address,
      detail,
      map,
      facebook,
      type,
      promotion,
      open,
      image
    } = this.state;
    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 l12">
            <div className="row center">
              <h3>ข้อมูลทั่วไป</h3>
            </div>
            <div className="row center">
              <br />

              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRGzUPvW-KAdZI6KiIyh-HHSKtqKRGSWcP3vDqHUd2Sn2F3SHwr" />
            </div>

            <div className="row center">
              <Button
                variant="outlined"
                color="primary"
                onClick={this.handleClickOpen}
              >
                <AddAPhotoIcon />
                เพิ่มรูปภาพร้าน
              </Button>
              <Dialog
                open={open}
                onClose={this.handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
              >
                <DialogTitle id="alert-dialog-title">
                  {"เพิ่มรูปภาพ"}
                </DialogTitle>
                <DialogContent>
                  <TextField
                    className={classes.margin}
                    id="outlined-file-input"
                    label="เพิ่มรูปภาพ"
                    type="file"
                    autoComplete="current-password"
                    variant="outlined"
                    InputProps={{
                      startAdornment: (
                        <InputAdornment position="start">
                          <AddPhotoAlternateIcon />
                        </InputAdornment>
                      )
                    }}
                  />
                </DialogContent>
                <DialogActions>
                  <Button onClick={this.handleClose} color="primary">
                    ยกเลิก
                  </Button>
                  <Button
                    onClick={() => {
                      axios
                        .post(
                          "http://localhost:9000/api/storageshop//upload/shop/:5",
                          {
                            image: image,
                            type: type
                          }
                        )
                        .then(response => {
                          console.log("เพิ่มรูปภาพสำเร็จ", response);
                          alert("เพิ่มรูปภาพสำเร็จ");
                         
                        })
                        .catch(error => {
                          console.log(error);
                        });
                      
                    }}
                    color="primary"
                    autoFocus
                  >
                    ยืนยัน
                  </Button>
                </DialogActions>
              </Dialog>
              &nbsp; &nbsp; &nbsp;
              <Button variant="outlined" color="primary">
                <PhotoCameraIcon />
                แก้ไขรูปภาพร้าน
              </Button>
            </div>
          </div>
          <div className="col s12 m6 l12">
            <div ClassName="row">
              <TextField
                className={classes.margin}
                id="name"
                name="name"
                value={name}
                label="ชื่อร้าน"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <AccountCircle />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              />
              <TextField
                className={classes.margin}
                id="nameeng"
                name="nameeng"
                value={nameeng}
                label="Name"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <AccountCircle />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              />
              <TextField
                className={classes.margin}
                id="timeopen"
                name="timeopen"
                value={timeopen}
                label="เวลาเปิดร้าน"
                autoComplete="Phone number"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <ContactPhoneIcon />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              />
            </div>
            <br />
            <div>
              <TextField
                className={classes.margin}
                id="timeclose"
                name="timeclose"
                value={timeclose}
                label="เวลาปิดร้าน"
                autoComplete="Phone number"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <ContactPhoneIcon />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              />
              <TextField
                className={classes.margin}
                id="tel"
                name="tel"
                value={tel}
                label="เบอร์โทรร้าน"
                autoComplete="address"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <BusinessIcon />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              />
              <TextField
                className={classes.margin}
                id="address"
                name="address"
                value={address}
                label="ที่อยู่ร้าน"
                autoComplete="Phone number"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <ContactPhoneIcon />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              />
            </div>
            <br />
            <div>
              <TextField
                className={classes.margin}
                id="detail"
                name="detail"
                value={detail}
                label="รายละเอียดร้าน"
                autoComplete="address"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <BusinessIcon />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              />
              <TextField
                className={classes.margin}
                id="map"
                name="map"
                value={map}
                label="GoogleMap"
                autoComplete="address"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <BusinessIcon />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              />
              <TextField
                className={classes.margin}
                id="facebook"
                name="facebook"
                value={facebook}
                label="Facebook"
                autoComplete="address"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <BusinessIcon />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              />
              <TextField
                className={classes.margin}
                id="type"
                name="type"
                value={type}
                select
                label="ประเภทของร้าน"
                onChange={this.handleChange}
                SelectProps={{
                  native: true
                }}
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <BusinessIcon />
                    </InputAdornment>
                  )
                }}
                onChange={this.handleChange}
              >
                {currencies.map(option => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </TextField>
            </div>
            <br></br>

            <div className="row">
              <div className={classes.root}>
                <Button variant="contained" color="secondary">
                  ยกเลิก
                </Button>{" "}
                &nbsp; &nbsp; &nbsp;
                <Button
                  variant="contained"
                  color="primary"
                  onClick={() => {
                    axios
                      .post("http://localhost:9000/api/shop/add", {
                        name: name,
                        nameeng: nameeng,
                        timeopen: timeopen,
                        timeclose: timeclose,
                        tel: tel,
                        address: address,
                        detail: detail,
                        map: map,
                        facebook: facebook,
                        type: type
                      })
                      .then(response => {
                        console.log("สร้างผู้ใช้สำเร็จ", response);
                        alert("เพิ่มข้อมูลสำเร็จ");
                        // window.location.href = "/";
                      })
                      .catch(error => {
                        console.log(error);
                      });
                    // alert("ลงทะเบียนสำเร็จ");
                  }}
                >
                  ตกลง
                </Button>
                &nbsp; &nbsp; &nbsp;
                <Fab color="secondary" aria-label="edit">
                  <EditIcon />
                </Fab>
              </div>
            </div>
          </div>
        </div>
        <div className="row center">
          <div className="row">
            <h3>ข้อมูลโปรโมชั่น</h3>
          </div>
          <div>
            <TextField
              className={classes.margin}
              id="promotion"
              name="promotion"
              value={promotion}
              label="ข้อมูลโปรโมชั่น"
              autoComplete="promotion"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <PostAddIcon />
                  </InputAdornment>
                )
              }}
              onChange={this.handleChange}
            />
            &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
            <Button variant="contained" color="secondary">
              ยกเลิก
            </Button>{" "}
            &nbsp; &nbsp; &nbsp;
            <Button
              variant="contained"
              color="primary"
              onClick={() => {
                axios
                  .post("http://localhost:9000/api/promotion/add", {
                    detail: promotion,
                    shop: "5"
                  })
                  .then(response => {
                    console.log("สร้างผู้ใช้สำเร็จ", response);
                    alert("เพิ่มข้อมูลสำเร็จ");
                    // window.location.href = "/";
                  })
                  .catch(error => {
                    console.log(error);
                  });
                // alert("ลงทะเบียนสำเร็จ");
              }}
            >
              ตกลง
            </Button>
            &nbsp; &nbsp; &nbsp;
            <Fab color="secondary" aria-label="edit">
              <EditIcon />
            </Fab>
          </div>
          <br></br>
        </div>
      </div>
    );
  }
}
export default compose(withStyles(styles), withRouter)(Datashop);
