import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import {
  Dialog,
  Button,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Paper,
  InputBase,
  Divider,
  IconButton,
  InputAdornment,
  TextField
} from "@material-ui/core";
import AppBra from "../../components/AppBra";
import { withRouter } from "react-router-dom";
import compose from "recompose/compose";
import { DatePicker } from "@material-ui/pickers";
import { injectIntl, FormattedRelativeTime } from "react-intl";
import { th } from "date-fns/locale";
import { format } from "date-fns";
import MenuIcon from "@material-ui/icons/Menu";

import SearchIcon from "@material-ui/icons/Search";
import DirectionsIcon from "@material-ui/icons/Directions";
import ListIcon from "@material-ui/icons/List";
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
import Rating from "@material-ui/lab/Rating";

const styles = theme => ({
  root: {
    // padding: "2px 4px",
    display: "flex",
    alignItems: "center",
    width: 400,
    "& .MuiTextField-root": {
      margin: theme.spacing(1),
      marginTop: theme.spacing(2),
      width: "100%"
    }
  },
  margin: {
    margin: theme.spacing(1)
  },

  input: {
    marginLeft: theme.spacing(1),
    flex: 1
  },
  iconButton: {
    padding: 10
  },
  divider: {
    height: 28,
    margin: 4
  },
  modal: {
    display: "flex",
    padding: theme.spacing(1),
    alignItems: "center",
    justifyContent: "center"
  }
});
const currencies = [
  {
    value: "1",
    label: "    กรุณาเลือกประเภท     "
  },
  {
    value: "2",
    label: "สปาและนวด"
  },
  {
    value: "3",
    label: "ผิวหน้า"
  },
  {
    value: "4",
    label: "ขนตาและคิ้ว"
  },
  {
    value: "5",
    label: "ทำเล็บ"
  },
  {
    value: "6",
    label: "ชาลอน"
  },
  {
    value: "7",
    label: "แต่งหน้าทำผม"
  }
];
class HomePage extends Component {
  state = {
    tab: 0,
    date: new Date(),
    open: false,
    list: false,
    rating: 0
  };
  handleClickOpen = () => {
    this.setState({
      open: true
    });
  };
  handleClose = () => {
    this.setState({
      open: false
    });
  };
  ClickOpen = () => {
    this.setState({
      list: true
    });
  };
  Close = () => {
    this.setState({
      list: false
    });
  };

  componentDidMount = () => {
    let { pathname } = this.props.location;
    pathname = pathname.substring(1, pathname.length);
    // console.log('pathname', pathname)
    const tab =
      pathname === "spa"
        ? 0
        : pathname === "tab2"
        ? 1
        : pathname === "tab3"
        ? 2
        : pathname === "tab4"
        ? 3
        : pathname === "tab5"
        ? 4
        : pathname === "tab6"
        ? 5
        : 0;
    //   7

    this.setState({
      tab: tab
    });
  };

  handleChangeTab = (event, newValue) => {
    const tab =
      newValue === 0
        ? "spa"
        : newValue === 1
        ? "tab2"
        : newValue === 2
        ? "tab3"
        : newValue === 3
        ? "tab4"
        : newValue === 4
        ? "tab5"
        : newValue === 5
        ? "tab6"
        : "spa";
    this.setState({ tab: newValue });
    // this.props.history.push(`/${tab}`);
  };

  handleChangeDate = newDate => {
    console.log("newDate: ", newDate);
    this.setState({
      date: newDate
    });
  };

  render() {
    const { classes } = this.props;
    // const tab = this.state.tab;
    // หรือ
    const { tab, date, open, list, value, rating } = this.state;
    return (
      <div>
        <AppBra tab={tab} handleChangeTab={this.handleChangeTab} />

        <div className="row mt-5 ">
          <div className="row mt-2 mb-2  ">
            <div className="row ">
              <center>
                <Paper component="form" className={classes.root}>
                  {/* <IconButton className={classes.iconButton} aria-label="menu">
                  <MenuIcon />
                </IconButton> */}
                  <InputBase
                    className={classes.input}
                    inputProps={{ "aria-label": "ค้นหาร้าน" }}
                  />
                  <IconButton
                    type="submit"
                    className={classes.iconButton}
                    aria-label="search"
                  >
                    <SearchIcon />
                  </IconButton>
                  {/* <Divider className={classes.divider} orientation="vertical" /> */}
                  {/* <IconButton
                  color="primary"
                  className={classes.iconButton}
                  aria-label="directions"
                >
                  <DirectionsIcon />
                </IconButton> */}
                </Paper>
              </center>
            </div>
          </div>

          <div className="row mt-5 mb-2 ">
            <div className="col s12 m6 l6">
              <div className="row  mt-3 mb-2 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="60%"
                  onClick={() => {
                    this.props.history.push("/ShopPage");
                  }}
                />
              </div>
            </div>

            <div className="col s12 m6 l4">
              <div className="row mt-2 mb-2">
                <h3>น้องใหม่บิวตี้ NongMai Beauty</h3>
              </div>

              <div className="row mt-2 mb-2">
                ที่อยู่ : 10 หมู่ 1 บ้านโพนเมือง ตำบลโพนเมือง อำเภอเหล่าเสือโก้ก
                จังหวัดอุบลราชธานี 34000
              </div>

              <div className="row  mt-3 mb-2">
                โปรโมชั่น : จองคิวผ่าน B Beauty ลด 5 %
              </div>
              <div className="row  mt-3 mb-2">
                <div className={classes.root}>
                  <Rating
                    name="size-large"
                    defaultValue={3.5}
                    size="large"
                    readOnly
                  />
                </div>
              </div>

              <div className="row center">
                <Button
                  variant="outlined"
                  color="primary"
                  onClick={this.handleClickOpen}
                >
                  จองคิว
                </Button>
                <Dialog
                  open={open}
                  onClose={this.handleClose}
                  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.handleClose}
                      color="primary"
                    >
                      ยกเลิก
                    </Button>
                    <Button
                      variant="outlined"
                      color="primary"
                      onClick={this.ClickOpen}
                    >
                      ถัดไป
                    </Button>
                  </DialogActions>
                </Dialog>
                <Dialog
                  open={list}
                  onClose={this.Close}
                  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>
                          )
                        }}
                      >
                        {/* {currencies.map(option => (
                          <option key={option.value} value={option.value}>
                            {option.label}
                          </option>
                        ))} */}
                      </TextField>
                      <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.Close} color="primary">
                      Cancel
                    </Button>
                    <Button onClick={this.Close} color="primary">
                      Subscribe
                    </Button>
                  </DialogActions>
                </Dialog>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

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