import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import compose from "recompose/compose";
import { withRouter } from "react-router-dom";
import AppBar from "../../components/AppBra";
import {
  Button,
  CardHeader,
  Avatar,
  IconButton,
  CardMedia,
  CardActions,
  CardContent,
  Typography,
  Card,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  InputAdornment,
  TextField,
  InputBase
} from "@material-ui/core";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import { DatePicker } from "@material-ui/pickers";
import { injectIntl, FormattedRelativeTime } from "react-intl";
import { th } from "date-fns/locale";
import { format } from "date-fns";
import Rating from "@material-ui/lab/Rating";
import ListIcon from "@material-ui/icons/List";
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import axios from "axios";
// const axios = require('axios');

const styles = theme => ({
  root: {
    minWidth: 275,
    height: 150,
    flexGrow: 1,
    transform: "translateZ(0)",
    // The position fixed scoping doesn't work in IE 11.
    // Disable this demo to preserve the others.
    "@media all and (-ms-high-contrast: none)": {
      display: "none"
    }
  },

  bullet: {
    display: "inline-block",
    margin: "0 2px",
    transform: "scale(0.8)"
  },
  title: {
    fontSize: 14
  },
  pos: {
    marginBottom: 12
  },

  modal: {
    display: "flex",
    padding: theme.spacing(1),
    alignItems: "center",
    justifyContent: "center"
  },
  fab: {
    position: "absolute",
    bottom: theme.spacing(2),
    right: theme.spacing(2)
  }
});
const currencieslist = [
  {
    value: "1",
    label: "    กรุณาเลือกรายการ   "
  },
  {
    value: "2",
    label: "อบไอน้ำ 30 นาที"
  },
  {
    value: "3",
    label: "นวดหน้า 60 นาที "
  },
  {
    value: "4",
    label: "สระได 20 นาที"
  },
  {
    value: "5",
    label: "ทำเล็บ 60 นาที"
  },
  {
    value: "6",
    label: "ยืดผมถาวร 120 นาที"
  },
  {
    value: "7",
    label: "ทำสีผม 60 นาที"
  }
];
const currencies = [
  {
    value: "1",
    label: "    กรุณาเลือกช่าง    "
  },
  {
    value: "2",
    label: "ช่าง ก"
  },
  {
    value: "3",
    label: "ช่าง ข"
  },
  {
    value: "4",
    label: "ช่าง ค"
  },
  {
    value: "5",
    label: "ช่าง ง"
  },
  {
    value: "6",
    label: "ช่าง จ"
  },
  {
    value: "7",
    label: "ช่าง"
  }
];

class ShopPage extends Component {
  state = {
  
    reviwe: false,
    list: false,
    date: new Date(),
    open: false,
    queue:false,
    shop: null
  };
  handleClickOpen = () => {
    this.setState({
      reviwe: true
    });
  };
  handleClose = () => {
    this.setState({
      reviwe: false
    });
  };
  handleClickOpenQ = () => {
    this.setState({
      open: true
    });
  };
  handleCloseQ = () => {
    this.setState({
      open: false
    });
  };
  ClickOpen = () => {
    this.setState({
      list: true
    });
  };
  Close = () => {
    this.setState({
      list: false
    });
  };
  ClickOpenqueue = () => {
    this.setState({
      queue: true
    });
  };
  Closequeue = () => {
    this.setState({
      queue: false
    });
  };

  componentDidMount = async () => {
    const {location } = this.props;
    const id = location.state.id;
    const response = await axios.get(`http://localhost:9000/api/shop/getShopId/${id}`);
    this.setState({
      shop: response.data
    });
  };

  render() {
    const { classes } = this.props;
    const bull = <span className={classes.bullet}>•</span>;
    const { shop, reviwe, list, date, open, queue  } = this.state;
    return (
      <div>
        <AppBar />

        { shop && <div className="row">
          <div className="row mt-2 mb-2">
            <div className="col s12 m6 l1"></div>
            <div className="col s12 m6 l11">
             <h3>{shop.name}</h3>
             {shop.address}
            </div>
          </div>
          <div className="row mt-4 mb-2">
            <div className="col s12 m6 l8">
              <div className="row center">
                <img
                  src="https://www.smeleader.com/wp-content/uploads/2018/05/%E0%B9%81%E0%B8%9F%E0%B8%A3%E0%B8%99%E0%B9%84%E0%B8%8A%E0%B8%AA%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B9%80%E0%B8%AA%E0%B8%A3%E0%B8%B4%E0%B8%A1%E0%B8%AA%E0%B8%A7%E0%B8%A2-%E0%B8%A3%E0%B8%A7%E0%B8%A1%E0%B9%81%E0%B8%9A%E0%B8%A3%E0%B8%99%E0%B8%94%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B8%8B%E0%B8%B2%E0%B8%A5%E0%B8%AD%E0%B8%99-%E0%B8%AA%E0%B8%B2%E0%B8%99%E0%B8%9D%E0%B8%B1%E0%B8%99%E0%B8%98%E0%B8%B8%E0%B8%A3%E0%B8%81%E0%B8%B4%E0%B8%88%E0%B8%97%E0%B8%A3%E0%B8%87%E0%B8%9C%E0%B8%A1.jpg"
                  width="90%"
                ></img>
              </div>
              <div className="row center">
                <Button
                  variant="contained"
                  color="secondary"
                  onClick={this.ClickOpen}
                >
                  รายการ
                </Button>{" "}
                <Dialog
                  open={list}
                  onClose={this.Close}
                  aria-labelledby="max-width-dialog-title"
                >
                  <DialogTitle id="max-width-dialog-title">รายการ</DialogTitle>
                  <DialogContent>
                    <DialogContentText>
                      You can set my maximum width and whether to adapt or not.
                    </DialogContentText>
                  </DialogContent>
                  <DialogActions>
                    <Button onClick={this.Close} color="primary">
                      Close
                    </Button>
                  </DialogActions>
                </Dialog>
                &nbsp; &nbsp; &nbsp;
                <Button
                  variant="contained"
                  color="primary"
                  onClick={this.handleClickOpenQ}
                >
                  จองคิว
                </Button>
                <Dialog
                  open={open}
                  onClose={this.handleCloseQ}
                  aria-labelledby="alert-dialog-title"
                  aria-describedby="alert-dialog-description"
                >
                  <DialogTitle id="alert-dialog-title">{"จองคิว"}</DialogTitle>
                  <DialogContent>
                    <h6>
                      วันที่ที่เลือกคือ{" "}
                      {format(new Date(date), "dd MMMM yyyy", {
                        locale: th
                      })}
                    </h6>
                    <DatePicker
                      autoOk
                      orientation="static"
                      variant="static"
                      openTo="date"
                      minDate={new Date()}
                      value={date}
                      onChange={this.handleChangeDate}
                    />
                  </DialogContent>
                  <DialogActions>
                    <Button
                      variant="outlined"
                      onClick={this.handleCloseQ}
                      color="primary"
                    >
                      ยกเลิก
                    </Button>
                    <Button
                      variant="outlined"
                      color="primary"
                      onClick={this.ClickOpenqueue}
                    >
                      ถัดไป
                    </Button>
                  </DialogActions>
                </Dialog>
                <Dialog
                  open={queue}
                  onClose={this.Closequeue}
                  aria-labelledby="max-width-dialog-title"
                >
                  <DialogTitle id="max-width-dialog-title">
                    กรุณาเลือกข้อมูลการจอง
                  </DialogTitle>
                  <DialogContent>
                    <DialogContentText>
                      <TextField
                        className={classes.margin}
                        id="list"
                        name="list"
                        select
                        label="เลือกรายการ"
                        onChange={this.handleChange}
                        SelectProps={{
                          native: true
                        }}
                        variant="outlined"
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <ListIcon />
                            </InputAdornment>
                          )
                        }}
                      >
                        {currencieslist.map(option => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </TextField> &nbsp; &nbsp; &nbsp;
                      <TextField
                        className={classes.margin}
                        id="list"
                        name="list"
                        select
                        label="เลือกช่าง"
                        onChange={this.handleChange}
                        SelectProps={{
                          native: true
                        }}
                        variant="outlined"
                        InputProps={{
                          startAdornment: (
                            <InputAdornment position="start">
                              <AssignmentIndIcon />
                            </InputAdornment>
                          )
                        }}
                      >
                        {currencies.map(option => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))}
                      </TextField>
                    </DialogContentText>
                  </DialogContent>
                  <DialogActions>
                    <Button onClick={this.Closequeue} color="primary">
                      Cancel
                    </Button>
                    <Button onClick={this.Closequeue} color="primary">
                      Subscribe
                    </Button>
                  </DialogActions>
                </Dialog>
              </div>
            </div>

            <div className="col s12 m6 l4">
              <div className="row">
                <center>
                  <img
                    src="https://lh3.googleusercontent.com/proxy/wF4hP1ITvhgYYaNaiAVTwuKzkAESOzL-PBNcSqC8xoR-cg2m2ztZVOc8B0gvjhF-3b0AXlJ2a_hV1X_XjNHqBGCKR-I-RdzGiMRSw0wVv-uv88ELTATaE4jBpyNILc20PSsLxpgQSpS-etDENw"
                    width="70%"
                  ></img>
                </center>
              </div>
              <div className="row">
                <h4>
                {shop.address}
                </h4>
              </div>

              <div className="row">
                <h4>เบอร์โทร : {shop.tel}</h4>
                <h4>เวลาเปิด : {shop.timeopen} น.</h4>
                <h4>เวลาปิด : {shop.timeclose} น.</h4>
              </div>
            </div>
          </div>

          <div className="row mt-2 mb-2">
            <div className="col s12 m6 l7">
              <div className="row center">
                <h4>ผลงานช่าง ปิยพร อาภรศรี</h4>
                <div className="col s12 m6 l4">
                  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAaEt_unwBuDLyqCP_bW3PBawVHkjZrNq-F3u7mAKtSjmBTrHE"></img>
                </div>
                <div className="col s12 m6 l4">
                  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAaEt_unwBuDLyqCP_bW3PBawVHkjZrNq-F3u7mAKtSjmBTrHE"></img>
                </div>
              </div>
            </div>
            <div className="col s12 m6 l1"></div>
            <div className="col s12 m6 l4">
              <div className="row">
                <center></center>
              </div>
              <div className="row">
                <Card className={classes.root} variant="outlined">
                  <CardContent>
                    <Typography
                      className={classes.title}
                      color="textSecondary"
                      gutterBottom
                    >
                      <h3>โปรโมชั่น</h3>
                    </Typography>

                    <Typography variant="body2" component="p">
                      <h4> จองคิวผ่าน B Beauty ลด 5 %</h4>

                      {'"12/02/2020 18:00"'}
                    </Typography>
                  </CardContent>
                  {/* <CardActions>
                    <Button size="small">Learn More</Button>
                  </CardActions> */}
                </Card>
              </div>
              <div className="row">
                <Card className={classes.root} variant="outlined">
                  <CardHeader
                    avatar={
                      <Avatar aria-label="recipe" className={classes.avatar}>
                        R
                      </Avatar>
                    }
                    action={
                      <IconButton aria-label="settings">
                        <MoreVertIcon />
                      </IconButton>
                    }
                    title="Shrimp and Chorizo Paella"
                    subheader="September 14, 2016"
                  />
                  <div className="row center">
                    <div className={classes.root}>
                      <Rating
                        name="size-large"
                        defaultValue={3.5}
                        size="small"
                        readOnly
                      />
                    </div>
                  </div>

                  <CardMedia
                    className={classes.media}
                    image="/static/images/cards/paella.jpg"
                    title="Paella dish"
                  />
                  <CardContent>
                    <Typography
                      variant="body2"
                      color="textSecondary"
                      component="p"
                    >
                      This impressive paella is a perfect party dish and a fun
                      meal to cook together with your guests. Add 1 cup of
                      frozen peas along with the mussels, if you like.
                    </Typography>
                  </CardContent>
                </Card>
              </div>
              <div className="row right">
                <Button
                  variant="contained"
                  color="primary"
                  onClick={this.handleClickOpen}
                >
                  เขียนรีวิว
                </Button>
                <Dialog
                  open={reviwe}
                  onClose={this.handleClose}
                  aria-labelledby="form-dialog-title"
                >
                  <DialogTitle id="form-dialog-title">เขียนรีวิวติชม</DialogTitle>
                  <DialogContent>
                    <DialogContentText>
                      To subscribe to this website, please enter your email
                      address here. We will send updates occasionally.
                    </DialogContentText>
                  </DialogContent>
                  <DialogActions>
                    <Button onClick={this.handleClose} color="primary">
                      Cancel
                    </Button>
                    <Button onClick={this.handleClose} color="primary">
                      Subscribe
                    </Button>
                  </DialogActions>
                </Dialog>
              </div>
            </div>
          </div>
        </div>
        }
      </div>
    );
  }
}

export default compose(withStyles(styles), withRouter)(ShopPage);
