import React, { Component } from "react";
import { withStyles, makeStyles } 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 Work extends Component {
  state = {
    open: false,
    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
    });
  };
  handleClickOpen = () => {
    this.setState({
      open: true
    });
  };
  handleClose = () => {
    this.setState({
      open: false
    });
  };
  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 () => {
    const { location, userInfo } = this.props;
    const { beautician } = this.state;

    const  response = await axios.get(
      `http://localhost:9000/api/beautician/getbeauticianName/${userInfo.name}`
    );
    const  responsebeautician = await axios.get(
      `http://localhost:9000/api/booking/getBookingbeautician/${userInfo.name}`
    );
   
    console.log("response.data",response.data);
    if (response.data)
      this.setState({
        beautician: response.data,
        data: responsebeautician.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"
            }}
          />
        </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)(Work));
