import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useParams, useHistory } from "react-router-dom";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
import DescriptionIcon from "@material-ui/icons/Description";
import PhotoIcon from "@material-ui/icons/Photo";
import RoomIcon from "@material-ui/icons/Room";
import RestaurantMenuIcon from "@material-ui/icons/RestaurantMenu";
import AddIcon from "@material-ui/icons/Add";
import Badge from "@material-ui/core/Badge";
import SearchIcon from "@material-ui/icons/Search";
import { formatDateBasic } from "../../Services.js";
//--------------
import EditRestaurantInfo from "../EditRestaurant/EditRestaurantInfo";
import EditRestaurantLocation from "../EditRestaurant/EditRestaurantLocation";
import EditRestaurantMenu from "../EditRestaurant/EditRestaurantMenu";
import EditRestaurantPhoto from "../EditRestaurant/EditRestaurantPhoto";
import EditRestaurantSubscription from "../EditRestaurant/EditRestaurantSubscription";
import { fetchAllDishes } from "../../actions";

const useStyles = makeStyles((theme) => ({
  main: {
    "& .MuiListItemIcon-root": {
      color: "#d68000",
    },
  },
  root: {
    "& .MuiBadge-colorPrimary": {
      backgroundColor: "#13ff00",
    },
    "& .MuiBadge-colorError": {
      backgroundColor: "#ff0000",
    },
  },
  secondary: {
    "& .MuiListItemText-secondary": {
      color: "#868686",
      fontSize: "13px",
    },
  },
}));

export default function EditRestaurant(props) {
  useEffect(() => {
    document.title = "Menui - Edytuj lokal";
  });
  const dispatch = useDispatch();
  const classes = useStyles();
  const [tab, setTab] = useState(0);
  const history = useHistory();
  let { id } = useParams();
  const restaurants = useSelector((state) => state.data.userData.restaurants);
  const badgeData = {
    color: "",
    secondaryText: "",
  };
  const restaurant = restaurants.find(matchId);
  if (restaurant === undefined) history.push("/");
  const badgeInit = () => {
    if (
      !restaurant.subscriptionActive ||
      restaurant.subscriptionActive === false
    ) {
      badgeData.color = "error";
      badgeData.secondaryText = "Nieaktywna";
    } else {
      badgeData.color = "primary";
      badgeData.secondaryText = `Aktywna do: ${formatDateBasic(
        restaurant.subscriptionDue
      )}`;
    }
  };
  dispatch(fetchAllDishes(restaurant._id));

  const handleListItemClick = (event, index) => {
    setTab(index);
  };

  function matchId(element) {
    return element._id === id;
  }
  badgeInit();

  return (
    <div className="editRestaurant-container">
      <div className="editRestaurant-menu">
        <h3 className="editRestaurant-title">{restaurant.name}</h3>
        <Divider />
        <List className={classes.main} component="nav">
          <ListItem
            button
            onClick={() => history.push(`/restaurant/${restaurant._id}`)}
          >
            <ListItemIcon>
              <SearchIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary="Podgląd" />
          </ListItem>
          <ListItem
            button
            selected={tab === 0}
            onClick={(event) => handleListItemClick(event, 0)}
          >
            <ListItemIcon>
              <DescriptionIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary="Informacje" />
          </ListItem>
          <ListItem
            button
            selected={tab === 1}
            onClick={(event) => handleListItemClick(event, 1)}
          >
            <ListItemIcon>
              <Badge
                className={classes.root}
                anchorOrigin={{ vertical: "top", horizontal: "left" }}
                variant="dot"
                color={badgeData.color}
              >
                <DescriptionIcon color="primary" />
              </Badge>
            </ListItemIcon>
            <ListItemText
              className={classes.secondary}
              primary="Subskrypcja"
              secondary={badgeData.secondaryText}
            />
          </ListItem>
          <ListItem
            button
            selected={tab === 2}
            onClick={(event) => handleListItemClick(event, 2)}
          >
            <ListItemIcon>
              <PhotoIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary="Zdjęcie" />
          </ListItem>
          <ListItem
            button
            selected={tab === 3}
            onClick={(event) => handleListItemClick(event, 3)}
          >
            <ListItemIcon>
              <RoomIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary="Lokalizacja" />
          </ListItem>
          <ListItem
            button
            selected={tab === 4}
            onClick={(event) => handleListItemClick(event, 4)}
          >
            <ListItemIcon>
              <RestaurantMenuIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary="Menu" />
          </ListItem>
          <ListItem
            button
            onClick={() => history.push(`/newDish/${restaurant._id}`)}
          >
            <ListItemIcon>
              <AddIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary="Dodaj danie" />
          </ListItem>
        </List>
        <Divider />
      </div>
      {tab === 0 && <EditRestaurantInfo restaurant={restaurant} />}
      {tab === 1 && <EditRestaurantSubscription restaurant={restaurant} />}
      {tab === 2 && <EditRestaurantPhoto restaurant={restaurant} />}
      {tab === 3 && <EditRestaurantLocation restaurant={restaurant} />}
      {tab === 4 && <EditRestaurantMenu restaurant={restaurant} />}
    </div>
  );
}