import React, { Component } from "react";
import PropTypes from "prop-types";
import AppBar from "@material-ui/core/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import {
  Divider,
  Drawer,
  Hidden,
  IconButton,
  Typography,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Toolbar
} from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
import InboxIcon from "@material-ui/icons/Inbox";
import MailIcon from "@material-ui/icons/Mail";
import MenuIcon from "@material-ui/icons/Menu";
import { withRouter } from "react-router-dom";
import Databeautician from "../Databeautician";
import Datashop from "../Datashop/index.js";
import compose from "recompose/compose";
import Profile from "../Profile";
import Lists from "../List";
import Managequeue from "../Managequeue";
import AccountBoxIcon from "@material-ui/icons/AccountBox";
import StorageIcon from "@material-ui/icons/Storage";
import Addimage from "../Addimage";
import ListIcon from "@material-ui/icons/List";
import RecentActorsIcon from "@material-ui/icons/RecentActors";
import QueryBuilderIcon from "@material-ui/icons/QueryBuilder";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";

const drawerWidth = 240;

const styles = theme => ({
  root: {
    display: "flex"
  },
  drawer: {
    [theme.breakpoints.up("sm")]: {
      width: drawerWidth,
      flexShrink: 0
      // zIndex: -1
    }
  },
  appBar: {
    [theme.breakpoints.up("sm")]: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth
    }
  },
  menuButton: {
    marginRight: theme.spacing(2),
    [theme.breakpoints.up("sm")]: {
      display: "none"
    },
    zIndex: 2
  },
  toolbar: theme.mixins.toolbar,
  drawerPaper: {
    width: drawerWidth
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3)
  }
});

class ResponsiveDrawer extends Component {
  state = {
    mobileOpen: false,
    path: "profile"
    // path: "datashop"
  };

  handleDrawerToggle = () => {
    this.setState(prevState => {
      return { ...prevState, mobileOpen: !prevState.mobileOpen };
    });
  };

  handleChangePath = path => {
    this.setState({
      path: path
    });
  };

  drawer = () => {
    const { classes } = this.props;
    const { path } = this.state;
    return (
      <div>
        <div
          className={classes.toolbar}
          style={{ backgroundColor: "#3f51b5", textAlign: "center" }}
        >
          <IconButton
            edge="start"
            color="inherit"
            aria-label="menu"
            Link
            href="/DataShopPage"
            style={{ color: "white" }}
          >
            <img src={require('../../../image/icon.png') }></img>
          </IconButton>
        </div>

        <Divider />

        <List>
          <ListItem
            button
            onClick={() => {
              this.handleChangePath("profile");
            }}
            selected={path == "profile" ? true : false}
          >
            <ListItemIcon>
              <AccountBoxIcon />
            </ListItemIcon>
            <ListItemText primary="โปรไฟล์" />
          </ListItem>

          <ListItem
            button
            onClick={() => {
              this.handleChangePath("datashop");
            }}
            selected={path == "datashop" ? true : false}
          >
            <ListItemIcon>
              <StorageIcon />
            </ListItemIcon>
            <ListItemText primary="ข้อมูลร้าน" />
          </ListItem>
          <ListItem
            button
            onClick={() => {
              this.handleChangePath("list");
            }}
            selected={path == "list" ? true : false}
          >
            <ListItemIcon>
              <ListIcon />
            </ListItemIcon>
            <ListItemText primary="รายการ" />
          </ListItem>
          <ListItem
            button
            onClick={() => {
              this.handleChangePath("databeautician");
            }}
            selected={path == "databeautician" ? true : false}
          >
            <ListItemIcon>
              <RecentActorsIcon />
            </ListItemIcon>
            <ListItemText primary="ข้อมูลช่าง" />
          </ListItem>
          <ListItem
            button
            onClick={() => {
              this.handleChangePath("managequeue");
            }}
            selected={path == "managequeue" ? true : false}
          >
            <ListItemIcon>
              <QueryBuilderIcon />
            </ListItemIcon>
            <ListItemText primary="ดูคิวจอง" />
          </ListItem>
          <ListItem
            button
            onClick={() => {
              this.handleChangePath("addimage");
            }}
            selected={path == "addimage" ? true : false}
          >
            <ListItemIcon>
              <AddAPhotoIcon />
            </ListItemIcon>
            <ListItemText primary="เพิ่มรูปภาพ" />
          </ListItem>
        </List>
      </div>
    );
  };

  render() {
    const { classes, theme } = this.props;
    const { mobileOpen, path } = this.state;

    return (
      <div className={classes.root}>
        <CssBaseline />
        <nav className={classes.drawer} aria-label="mailbox folders">
          <Hidden smUp implementation="css">
            <Drawer
              variant="temporary"
              anchor={theme.direction === "rtl" ? "right" : "left"}
              open={mobileOpen}
              onClose={this.handleDrawerToggle}
              classes={{
                paper: classes.drawerPaper
              }}
              ModalProps={{
                keepMounted: true // Better open performance on mobile.
              }}
            >
              {this.drawer()}
            </Drawer>
          </Hidden>
          <Hidden xsDown implementation="css">
            <Drawer
              classes={{
                paper: classes.drawerPaper
              }}
              variant="permanent"
              open
            >
              {this.drawer()}
            </Drawer>
          </Hidden>
        </nav>

        <main className={classes.content}>
          {path == "profile" ? <Profile /> : null}
          {path == "datashop" ? <Datashop /> : null}
          {path == "list" ? <Lists /> : null}
          {path == "databeautician" ? <Databeautician /> : null}
          {path == "managequeue" ? <Managequeue /> : null}
          {path == "addimage" ? <Addimage /> : null}
        </main>
      </div>
    );
  }
}

ResponsiveDrawer.propTypes = {
  classes: PropTypes.object.isRequired
};

export default compose(
  withStyles(styles, { withTheme: true }),
  withRouter
)(ResponsiveDrawer);
