import React, { useState } from "react";
import PropTypes from "prop-types";
import clsx from "clsx";
import { makeStyles, useTheme } from "@material-ui/core/styles";
import {
  Drawer,
  List,
  Divider,
  IconButton,
  ListItemIcon,
  ListItemText
} from "@material-ui/core";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
import ListItem from "@material-ui/core/ListItem";
import BuildIcon from "@material-ui/icons/Build";
import DnsIcon from "@material-ui/icons/Dns";
import DeviceHubIcon from "@material-ui/icons/DeviceHub";
import SettingsIcon from "@material-ui/icons/Settings";
import DashboardIcon from "@material-ui/icons/Dashboard";
import FeaturedPlayListIcon from "@material-ui/icons/FeaturedPlayList";
import { useHistory } from "react-router-dom";
import { useTranslation } from "react-i18next";
import styles from "./styles";

const useStyles = makeStyles(styles);

const menu = [
  {
    order: 0,
    items: [
      {
        code: "dashboard",
        name: "Menu.Dashboard",
        route: "/dashboard",
        icon: <DashboardIcon />,
        order: 0
      },
      {
        code: "machines",
        name: "Menu.Machines",
        route: "/machines",
        icon: <DnsIcon />,
        order: 1
      },
      {
        code: "system",
        name: "Menu.System",
        route: "/system",
        icon: <DeviceHubIcon />,
        order: 2
      }
    ]
  },
  {
    order: 1,
    items: [
      {
        code: "administration",
        name: "Menu.Administration",
        route: "/administration",
        icon: <BuildIcon />,
        order: 0
      },
      {
        code: "settings",
        name: "Menu.Settings",
        route: "/settings",
        icon: <SettingsIcon />,
        order: 1
      }
    ]
  },
  {
    order: 2,
    items: [
      {
        code: "about",
        name: "Menu.About",
        route: "/about",
        icon: <FeaturedPlayListIcon />,
        order: 0
      }
    ]
  }
];

const sortedMenu = menu.sort((i1, i2) => i1 - i2);

const Sidebar = ({ open, handleDrawerClose }) => {
  const [selected, setSelected] = useState(null);

  const classes = useStyles();
  const theme = useTheme();
  const history = useHistory();
  const { t } = useTranslation();

  const handleClick = route => () => {
    setSelected(route);
    history.push(route);
  };

  const isSelected = key => selected === key;

  return (
    <Drawer
      variant="permanent"
      className={clsx(classes.drawer, {
        [classes.drawerOpen]: open,
        [classes.drawerClose]: !open
      })}
      classes={{
        paper: clsx({
          [classes.drawerOpen]: open,
          [classes.drawerClose]: !open
        })
      }}
    >
      <div className={classes.toolbar}>
        <IconButton onClick={handleDrawerClose}>
          {theme.direction === "rtl" ? (
            <ChevronRightIcon />
          ) : (
            <ChevronLeftIcon />
          )}
        </IconButton>
      </div>
      <Divider />

      {sortedMenu.map((menu, index) => {
        const isLast = index === sortedMenu.length - 1;
        return (
          <React.Fragment key={`menu-${menu.order}`}>
            <List>
              {menu.items
                .sort((i1, i2) => i1 - i2)
                .map(item => (
                  <ListItem
                    button
                    key={item.code}
                    onClick={handleClick(item.route)}
                    selected={isSelected(item.route)}
                  >
                    <ListItemIcon>{item.icon}</ListItemIcon>
                    <ListItemText primary={t(item.name)} />
                  </ListItem>
                ))}
            </List>
            {!isLast && <Divider />}
          </React.Fragment>
        );
      })}
    </Drawer>
  );
};

Sidebar.propTypes = {
  open: PropTypes.bool.isRequired,
  handleDrawerClose: PropTypes.func.isRequired
};

export default Sidebar;