import React, { useState } from "react";
import { useSelector } from "react-redux";
import Collapse from "@material-ui/core/Collapse";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListSubheader from "@material-ui/core/ListSubheader";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import FastfoodIcon from "@material-ui/icons/Fastfood";
import AddIcon from "@material-ui/icons/Add";
import SettingsIcon from "@material-ui/icons/Settings";
import { useHistory } from "react-router-dom";
import ListItemRestaurant from "./Output/ListItemRestaurant";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
  },
  nested: {
    paddingLeft: theme.spacing(4),
  },
  subheader: {
    color: "#767676",
    fontSize: "0.8rem",
    fontWeight: "400",
    paddingLeft: 0,
  },
}));

export default function UserMenu(props) {
  const restaurants = useSelector((state) => state.data.userData.restaurants);
  const [open, setOpen] = useState(true);
  const classes = useStyles();
  const handleClick = () => {
    setOpen(!open);
  };
  const handleButtonClick = (url) => {
    props.closeMenu();
    history.push(url);
  };
  const history = useHistory();

  const viewRestaurants = restaurants.map((restaurant) => {
    return (
      <ListItemRestaurant
        name={restaurant.name}
        key={restaurant._id}
        subscriptionActive={restaurant.subscriptionActive}
        id={restaurant._id}
        onClick={(link) => handleButtonClick(link)}
      />
    );
  });

  return (
    <List
      className={classes.root}
      subheader={
        <ListSubheader className={classes.subheader}>
          Menu użytkownika
        </ListSubheader>
      }
    >
      <ListItem
        button
        onClick={() => handleButtonClick("/settings")}
        disableGutters
      >
        <ListItemIcon>
          <SettingsIcon />
        </ListItemIcon>
        <ListItemText primary="Ustawienia konta" />
      </ListItem>
      <ListItem button onClick={handleClick} disableGutters>
        <ListItemIcon>
          <FastfoodIcon />
        </ListItemIcon>
        <ListItemText primary="Moje restauracje" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItem button onClick={() => handleButtonClick("/newRestaurant")}>
            <ListItemIcon>
              <AddIcon />
            </ListItemIcon>
            <ListItemText primary="Dodaj restaurację" />
          </ListItem>
          {viewRestaurants}
        </List>
      </Collapse>
    </List>
  );
}