import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import { withRouter } from "react-router-dom";
import compose from "recompose/compose";
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker
} from "@material-ui/pickers";
import MaterialTable from "material-table";
import axios from "axios";

import { connect } from "react-redux";
const styles = theme => ({
  root: {
    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"
    }
  },
  modal: {
    display: "flex",
    padding: theme.spacing(1),
    alignItems: "center",
    justifyContent: "center"
  },
  fab: {
    position: "absolute",
    bottom: theme.spacing(2),
    right: theme.spacing(2)
  }
});

class Managequeue extends Component {
  state = {
    columns: [
      { title: "ชื่อคนจอง", field: "name" },
      { title: "รายการจอง", field: "list" },
      { title: "วันที่จอง" , field: "date"},

      { title: "เวลาที่จอง", field: "time" },

      { title: "ช่างที่จอง", field: "beautician" }
    ],
    data: [],
    selectedDate: new Date()
  };
  handleChangeDate = newDate => {
    console.log("newDate: ", newDate);
    this.setState({
      date: newDate
    });
  };

  handleCloseAndSave = () => {
    //Save to db

    this.setState(prevState => {
      const data = [...prevState.data];
      const newData = {
        name: "Mehmet",
        surname: "Baran",
        birthYear: 1987,
        birthCity: 63
      };
      data.push(newData);
      return { ...prevState, data: data, open: false };
    });

    // this.setState({
    //   open: false
    // });
  };
  componentDidMount = async () => {
    // console.log('pathname', pathname)
    const { location, userInfo } = this.props;
    const {selectedDate} =this.state
    // const id = location.state.id;
    const response = await axios.get(
      `http://localhost:9000/api/shop/getUserId/${userInfo.id}`
    );
    
    const responsebooking = await axios.get(
      `http://localhost:9000/api/booking/getBookingShopid/${response.data.id}`
    );
    // if (responsebooking.data){
    //   const responsebookingdate = await axios.get(
    //     `http://localhost:9000/api/booking/getBookingShopid/${selectedDate}`
    //   );
    //   console.log(responsebookingdate.data);
    // }
    
   
    
    if (response.data) this.setState({ shop: response.data });
    if (responsebooking .data) this.setState({ data: responsebooking .data });
  };

  render() {
    const { classes } = this.props;

    const { open, columns, data, selectedDate } = this.state;
    return (
      <div>
        {/* <div className="row center">
          <KeyboardDatePicker
            disableToolbar
            variant="inline"
            format="dd/MM/yyyy"
            margin="normal"
            id="date-picker-inline"
            label="เลือกวันที่"
            value={selectedDate}
            onChange={this.handleDateChange}
            KeyboardButtonProps={{
              "aria-label": "change date"
            }}
            onClick={(e) => {
              e.preventDefault();
              axios
                .post("http://localhost:9000/api/booking/searchBooking", {
                  name: selectedDate,
                })
                .then(async (response) => {
                  
                  this.setState({ booking: response.data });
                  console.log("ค้นหาสำเร็จ", response);
                  // alert("ค้นหาสำเร็จ");
                })
                .catch((error) => {
                  console.log(error);
                  alert("ค้นหาไม่สำเร็จ");
                });
            }}
          />
        </div> */}
        <div className="row">
          <MaterialTable
            title="คิวจอง"
            columns={columns}
            data={data}
            options={{
              selection: false
            }}
        
          />
        </div>
      </div>
    );
  }
}

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

const mapDispatchToProps = (dispatch) => {};

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

