import React, { Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import {
  Dialog,
  Button,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  Paper,
  InputBase,
  Divider,
  IconButton
} from "@material-ui/core";
import AppBra from "../../../components/AppBra";
import { withRouter } from "react-router-dom";
import compose from "recompose/compose";
import { th } from "date-fns/locale";
import { format } from "date-fns";
import { MenuIcon } from "@material-ui/icons/Menu";
import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import DoneIcon from "@material-ui/icons/Done";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import InputAdornment from "@material-ui/core/InputAdornment";
import FormControl from "@material-ui/core/FormControl";
import TextField from "@material-ui/core/TextField";
import Grid from "@material-ui/core/Grid";
import AccountCircle from "@material-ui/icons/AccountCircle";
import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import VpnKeyIcon from "@material-ui/icons/VpnKey";
import TextareaAutosize from "@material-ui/core/TextareaAutosize";
import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
import BusinessIcon from "@material-ui/icons/Business";
import { DatePicker } from "@material-ui/pickers";
import { injectIntl, FormattedRelativeTime } from "react-intl";
import CheckIcon from "@material-ui/icons/Check";

import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker
} from "@material-ui/pickers";
import MaterialTable from "material-table";

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: "time" },

      { title: "ช่างที่จอง", field: "booking" }
    ],
    data: [
      {
        name: "Benz Piyaphorn",
        list: "อบไอน้ำ",
        time: "12:00",
        booking: "ปิยพร อาภรศรี"
      }
    ],
    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 = () => {
    let { pathname } = this.props.location;
    pathname = pathname.substring(1, pathname.length);
    // console.log('pathname', pathname)
  };

  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
            }}
            editable={{
              
              // onRowAdd: newData =>
              //   new Promise(resolve => {
              //     setTimeout(() => {
              //       resolve();
              //       this.setState(prevState => {
              //         const data = [...prevState.data];
              //         data.push(newData);
              //         return { ...prevState, data };
              //       });
              //     }, 600);
              //   }),
              onRowUpdate: (newData, oldData) =>
                new Promise(resolve => {
                  setTimeout(() => {
                    resolve();
                    if (oldData) {
                      this.setState(prevState => {
                        const data = [...prevState.data];
                        data[data.indexOf(oldData)] = newData;
                        return { ...prevState, data };
                      });
                    }
                  }, 600);
                }),

              // onRowDelete: oldData =>
              //   new Promise(resolve => {
              //     setTimeout(() => {
              //       resolve();
              //       this.setState(prevState => {
              //         const data = [...prevState.data];
              //         data.splice(data.indexOf(oldData), 1);
              //         return { ...prevState, data };
              //       });
              //     }, 600);
                // })
            }}
          />
        </div>
      </div>
    );
  }
}

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