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 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: {
      name: "",
      nameeng: "",
      timeopen: "",
      timeclose: "",
      tel: "",
      address: "",
      detail: "",
      images: "",
      lat: "",
      lng: "",
      facebook: "",
      type: ""
    },

    file: null,
    promotion: {detail:""},
    open: false,
    openupdate: false
  };
  handleClickOpen = () => {
    this.setState({
      open: true
    });
  };
  handleClose = () => {
    this.setState({
      open: 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 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(resposeimgshop);
    const responsepromotion = await axios.get(
      `http://localhost:9000/api/promotion/getuserId/${userInfo.id}`
    );
    response.data.image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
    if (response.data) this.setState({ shop: response.data });
    if (responsepromotion.data) this.setState({ promotion: responsepromotion.data });
    
  
  };

  render() {
    const { classes, userInfo } = this.props;
    const { currency, shop, promotion, open, file ,openupdate} = 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">
              <h3>ข้อมูลทั่วไป</h3>
            </div>
            <div className="row center">
              <br />

              <img src={shop.image}  width="60%"/>
            </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"
                    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>
              &nbsp; &nbsp; &nbsp;
              <Button variant="outlined" onClick={this.handleClickOpenupdate} color="primary">
                <PhotoCameraIcon />
                แก้ไขรูปภาพร้าน 
              </Button>
              <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>
                  )
                }}
                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>
            </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", {
                        ...shop,
                        userId: userInfo.id
                      })
                      .then(response => {
                        console.log("เพิ่มข้อมูลร้านสำเร็จ", response);
                        alert("กรอกข้อมูลไม่ครบ");
                      })
                      .catch(error => {
                        console.log(error);
                      });
                   
                  }}
                >
                  ตกลง
                </Button>
                &nbsp; &nbsp; &nbsp;
                <Fab color="secondary" aria-label="edit">
                  <EditIcon />
                </Fab>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    );
  }
}

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

const mapDispatchToProps = dispatch => {};

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