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 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 DetailsIcon from "@material-ui/icons/Details";
import PlaceIcon from "@material-ui/icons/Place";
import FacebookIcon from "@material-ui/icons/Facebook";
import MergeTypeIcon from "@material-ui/icons/MergeType";
import AddIcon from "@material-ui/icons/Add";
import axios from "axios";

import { connect } from "react-redux";

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: "สปาและนวด",
    label: "สปาและนวด",
  },
  {
    value: "ผิวหน้า",
    label: "ผิวหน้า",
  },
  {
    value: "ขนตาและคิ้ว",
    label: "ขนตาและคิ้ว",
  },
  {
    value: "ทำเล็บ",
    label: "ทำเล็บ",
  },
  {
    value: "ชาลอน",
    label: "ชาลอน",
  },
  {
    value: "แต่งหน้าทำผม",
    label: "แต่งหน้าทำผม",
  },
];

class Datashop extends Component {
  state = {
    currency: "1",
    shop: {},
    showButton: true,
    file: null,
    promotion: { detail: "" },
    open: false,
    openupdate: false,
    add: false,
    edit: false,
  };

  handleClickOpen = () => {
    this.setState({
      open: true,
    });
  };
  handleClose = () => {
    this.setState({
      open: false,
    });
  };
  handleClickAdd = () => {
    this.setState({
      add: true,
    });
  };
  handleCloseAdd = () => {
    this.setState({
      add: false,
    });
  };
  handleClickEdit = () => {
    this.setState({
      edit: true,
    });
  };
  handleCloseEdit = () => {
    this.setState({
      edit: false,
    });
  };
  handleClickOpenupdate = () => {
    this.setState({
      openupdate: true,
    });
  };
  handleCloseupdate = () => {
    this.setState({
      openupdate: false,
    });
  };
  handleChange = (event) => {
    let { shop } = this.state;
    console.log("name : ", event.target.name);
    console.log("value : ", event.target.value);

    shop[event.target.name] = event.target.value;

    this.setState({
      shop,
    });
  };

  componentDidMount = async () => {
    const { location, userInfo } = this.props;
    const { shop } = this.state
    // const id = location.state.id;
    const response = await axios.get(
      `http://localhost:9000/api/shop/getUserId/${userInfo.id}`
    );
    const resposeimgshop = await axios.get(
      `http://localhost:9000/api/storage/file/shop/${response.data.id}`
    );
    console.log(response.data);
    // console.log(resposeimgshop);
    if (resposeimgshop.data) {
      response.data.image =
        "data:" +
        resposeimgshop.data.type +
        ";base64," +
        resposeimgshop.data.url;
    }

  
    if (response.data){
      this.setState({
         shop: response.data
        });
    }
  };

  render() {
    const { classes, userInfo } = this.props;
    const {
      currency,
      shop,
      promotion,
      open,
      file,
      openupdate,
      add,
      edit,
    } = 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 m12 l12">
            <div className="row center">
              <br />

              <img src={shop.image} width="60%" />
            </div>

            <div className="row center">
              {shop.image ? (
                <Button
                  variant="outlined"
                  onClick={this.handleClickOpenupdate}
                  color="primary"
                >
                  <PhotoCameraIcon />
                  แก้ไขรูปภาพร้าน
                </Button>
              ) : (
                <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"
                    InputProps={{
                      startAdornment: (
                        <InputAdornment position="start">
                          <AddPhotoAlternateIcon />
                        </InputAdornment>
                      ),
                    }}
                    onChange={(e) => {
                      this.setState({
                        file: e.target.files[0],
                      });
                    }}
                  />
                </DialogContent>
                <DialogActions>
                  <Button onClick={this.handleClose} color="primary">
                    ยกเลิก
                  </Button>
                  <Button
                    onClick={() => {
                      const { location, userInfo } = this.props;
                      const formData = new FormData();
                      console.log(file);

                      formData.append("images", file);
                      formData.append("shop_id", shop.id);
                      // formData.append('userId', userInfo.id)

                      axios
                        .post(
                          `http://localhost:9000/api/storage/upload/shop/${shop.id}`,
                          formData
                        )
                        .then((response) => {
                          console.log("เพิ่มรูปภาพสำเร็จ", response);
                          alert("เพิ่มรูปภาพสำเร็จ");
                          this.handleClose();
                        })
                        .catch((error) => {
                          console.log(error);
                        });
                    }}
                    color="primary"
                    autoFocus
                  >
                    ยืนยัน
                  </Button>
                </DialogActions>
              </Dialog>

              <Dialog
                open={openupdate}
                onClose={this.handleCloseupdate}
                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"
                    InputProps={{
                      startAdornment: (
                        <InputAdornment position="start">
                          <AddPhotoAlternateIcon />
                        </InputAdornment>
                      ),
                    }}
                    onChange={(e) => {
                      this.setState({
                        file: e.target.files[0],
                      });
                    }}
                  />
                </DialogContent>
                <DialogActions>
                  <Button onClick={this.handleCloseupdate} color="primary">
                    ยกเลิก
                  </Button>
                  <Button
                    onClick={() => {
                      const { location, userInfo } = this.props;
                      const formData = new FormData();
                      // console.log(file);

                      formData.append("images", file);
                      formData.append("shop_id", shop.id);
                      // // formData.append('userId', userInfo.id)

                      axios
                        .put(
                          `http://localhost:9000/api/storage/file/shop/${shop.id}`,
                          formData
                        )
                        .then((response) => {
                          console.log("แก้ไขรูปภาพสำเร็จ", response);
                          alert("แกไขรูปภาพสำเร็จ");
                          this.handleCloseupdate();
                        })
                        .catch((error) => {
                          console.log(error);
                        });
                    }}
                    color="primary"
                    autoFocus
                  >
                    ยืนยัน
                  </Button>
                </DialogActions>
              </Dialog>
            </div>
          </div>
          <div className="col s12 m12 l12">
            <div ClassName="row">
              <TextField
                className={classes.margin}
                id="name"
                name="name"
                value={shop.name}
                label="ชื่อร้าน*"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <AccountCircle />
                    </InputAdornment>
                  ),
                }}
              />
              <TextField
                className={classes.margin}
                id="nameeng"
                name="nameeng"
                value={shop.nameeng}
                label="Name*"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <AccountCircle />
                    </InputAdornment>
                  ),
                }}
              />
              <TextField
                className={classes.margin}
                id="timeopen"
                name="timeopen"
                value={shop.timeopen}
                label="เวลาเปิดร้าน*"
                autoComplete="timeopen"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <ContactPhoneIcon />
                    </InputAdornment>
                  ),
                }}
              />

              <TextField
                className={classes.margin}
                id="timeclose"
                name="timeclose"
                value={shop.timeclose}
                label="เวลาปิดร้าน*"
                autoComplete="timeclose"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <ContactPhoneIcon />
                    </InputAdornment>
                  ),
                }}
              />
              <TextField
                className={classes.margin}
                id="tel"
                name="tel"
                value={shop.tel}
                label="เบอร์โทรร้าน*"
                autoComplete="tel"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <BusinessIcon />
                    </InputAdornment>
                  ),
                }}
              />
              <TextField
                className={classes.margin}
                id="address"
                name="address"
                value={shop.address}
                label="ที่อยู่ร้าน*"
                autoComplete="address"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <ContactPhoneIcon />
                    </InputAdornment>
                  ),
                }}
              />

              <TextField
                className={classes.margin}
                id="detail"
                name="detail"
                value={shop.detail}
                label="รายละเอียดร้าน*"
                autoComplete="detail"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <DetailsIcon />
                    </InputAdornment>
                  ),
                }}
              />
              <TextField
                className={classes.margin}
                id="lat"
                name="lat"
                value={shop.lat}
                label="lat*"
                autoComplete="lat"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <PlaceIcon />
                    </InputAdornment>
                  ),
                }}
              />
              <TextField
                className={classes.margin}
                id="lng"
                name="lng"
                value={shop.lng}
                label="lng*"
                autoComplete="lng"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <PlaceIcon />
                    </InputAdornment>
                  ),
                }}
              />
              <TextField
                className={classes.margin}
                id="facebook"
                name="facebook"
                value={shop.facebook}
                label="Facebook"
                autoComplete="address"
                variant="outlined"
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <FacebookIcon />
                    </InputAdornment>
                  ),
                }}
              />
            </div>

            <div className="row mt-5">
              <div className={classes.root}>
                {shop.id ? (
                  <Fab
                    color="secondary"
                    aria-label="edit"
                    onClick={this.handleClickEdit}
                  >
                    <EditIcon />
                  </Fab>
                ) : (
                  <Fab
                    aria-label={"add"}
                    className={classes.fab}
                    color="primary"
                    onClick={this.handleClickAdd}
                  >
                    <AddIcon />
                  </Fab>
                )}

                <Dialog
                  open={add}
                  onClose={this.handleCloseAdd}
                  aria-labelledby="alert-dialog-title"
                  aria-describedby="alert-dialog-description"
                >
                  <DialogTitle id="alert-dialog-title">
                    {"เพิ่มข้อมูลร้าน"}
                  </DialogTitle>
                  <DialogContent>
                    <TextField
                      className={classes.margin}
                      id="name"
                      name="name"
                      value={shop.name}
                      label="ชื่อร้าน*"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <AccountCircle />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="nameeng"
                      name="nameeng"
                      value={shop.nameeng}
                      label="Name*"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <AccountCircle />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="timeopen"
                      name="timeopen"
                      value={shop.timeopen}
                      label="เวลาเปิดร้าน*"
                      autoComplete="timeopen"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <ContactPhoneIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />

                    <TextField
                      className={classes.margin}
                      id="timeclose"
                      name="timeclose"
                      value={shop.timeclose}
                      label="เวลาปิดร้าน*"
                      autoComplete="timeclose"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <ContactPhoneIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="tel"
                      name="tel"
                      value={shop.tel}
                      label="เบอร์โทรร้าน*"
                      autoComplete="tel"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <BusinessIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="address"
                      name="address"
                      value={shop.address}
                      label="ที่อยู่ร้าน*"
                      autoComplete="address"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <ContactPhoneIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />

                    <TextField
                      className={classes.margin}
                      id="detail"
                      name="detail"
                      value={shop.detail}
                      label="รายละเอียดร้าน*"
                      autoComplete="detail"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <DetailsIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="lat"
                      name="lat"
                      value={shop.lat}
                      label="lat*"
                      autoComplete="lat"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <PlaceIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="lng"
                      name="lng"
                      value={shop.lng}
                      label="lng*"
                      autoComplete="lng"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <PlaceIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="facebook"
                      name="facebook"
                      value={shop.facebook}
                      label="Facebook"
                      autoComplete="address"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <FacebookIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="type"
                      name="type"
                      value={shop.type}
                      select
                      label="ประเภทของร้าน*"
                      
                      SelectProps={{
                        native: true,
                      }}
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <MergeTypeIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    >
                      {currencies.map((option) => (
                        <option key={option.value} value={option.value}>
                          {option.label}
                        </option>
                      ))}
                    </TextField>
                  </DialogContent>
                  <DialogActions>
                    <Button
                      variant="contained"
                      color="secondary"
                      onClick={this.handleCloseAdd}
                    >
                      ยกเลิก
                    </Button>{" "}
                    &nbsp; &nbsp; &nbsp;
                    <Button
                      variant="contained"
                      color="primary"
                      onClick={() => {
                        axios
                          .post("http://localhost:9000/api/shop/add", {
                            ...shop,
                            userId: userInfo.id,
                          })
                          .then((response) => {
                            console.log("เพิ่มข้อมูลร้านสำเร็จ", response);
                            alert("เพิ่มข้อมูลร้านสำเร็จ");
                            this.handleCloseAdd();
                          })
                          .catch((error) => {
                            console.log(error);
                            alert("กรอกข้อมูลไม่ครบ");
                          });
                      }}
                    >
                      ตกลง
                    </Button>
                  </DialogActions>
                </Dialog>

                <Dialog
                  open={edit}
                  onClose={this.handleCloseEdit}
                  aria-labelledby="alert-dialog-title"
                  aria-describedby="alert-dialog-description"
                >
                  <DialogTitle id="alert-dialog-title">
                    {"แก้ไขข้อมูลร้าน"}
                  </DialogTitle>
                  <DialogContent>
                    <TextField
                      className={classes.margin}
                      id="name"
                      name="name"
                      value={shop.name}
                      label="ชื่อร้าน*"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <AccountCircle />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="nameeng"
                      name="nameeng"
                      value={shop.nameeng}
                      label="Name*"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <AccountCircle />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="timeopen"
                      name="timeopen"
                      value={shop.timeopen}
                      label="เวลาเปิดร้าน*"
                      autoComplete="timeopen"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <ContactPhoneIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />

                    <TextField
                      className={classes.margin}
                      id="timeclose"
                      name="timeclose"
                      value={shop.timeclose}
                      label="เวลาปิดร้าน*"
                      autoComplete="timeclose"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <ContactPhoneIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="tel"
                      name="tel"
                      value={shop.tel}
                      label="เบอร์โทรร้าน*"
                      autoComplete="tel"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <BusinessIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="address"
                      name="address"
                      value={shop.address}
                      label="ที่อยู่ร้าน*"
                      autoComplete="address"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <ContactPhoneIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />

                    <TextField
                      className={classes.margin}
                      id="detail"
                      name="detail"
                      value={shop.detail}
                      label="รายละเอียดร้าน*"
                      autoComplete="detail"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <DetailsIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="lat"
                      name="lat"
                      value={shop.lat}
                      label="lat*"
                      autoComplete="lat"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <PlaceIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="lng"
                      name="lng"
                      value={shop.lng}
                      label="lng*"
                      autoComplete="lng"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <PlaceIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="facebook"
                      name="facebook"
                      value={shop.facebook}
                      label="Facebook"
                      autoComplete="address"
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <FacebookIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    />
                    <TextField
                      className={classes.margin}
                      id="type"
                      name="type"
                      value={shop.type}
                      select
                      label="ประเภทของร้าน*"
                      onChange={this.handleChange}
                      SelectProps={{
                        native: true,
                      }}
                      variant="outlined"
                      InputProps={{
                        startAdornment: (
                          <InputAdornment position="start">
                            <MergeTypeIcon />
                          </InputAdornment>
                        ),
                      }}
                      onChange={this.handleChange}
                    >
                      {currencies.map((option) => (
                        <option key={option.value} value={option.value}>
                          {option.label}
                        </option>
                      ))}
                    </TextField>
                  </DialogContent>
                  <DialogActions>
                    <Button
                      variant="contained"
                      color="secondary"
                      onClick={this.handleCloseEdit}
                    >
                      ยกเลิก
                    </Button>{" "}
                    &nbsp; &nbsp; &nbsp;
                    <Button
                      variant="contained"
                      color="primary"
                      onClick={() => {
                        const { shop } = this.state;
                        axios
                          .put(
                            `http://localhost:9000/api/shop/updateshopId/${shop.id}`,
                            {
                              ...shop,
                            }
                          )

                          .then((response) => {
                            console.log("แก้ไขข้อมูลร้านสำเร็จ", response);
                            alert("แก้ไขข้อมูลสำเร็จ");
                            this.handleCloseEdit();
                          })
                          .catch((error) => {
                            console.log(error);
                          });
                      }}
                    >
                      ตกลง
                    </Button>
                  </DialogActions>
                </Dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  userInfo: state.user,
});

const mapDispatchToProps = (dispatch) => {};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(compose(withStyles(styles), withRouter)(Datashop));
