import React from "react";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ListItem from "@material-ui/core/ListItem";
import FastfoodIcon from "@material-ui/icons/Fastfood";
import Badge from "@material-ui/core/Badge";
import { makeStyles } from "@material-ui/core/styles";

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

export default function ListItemRestaurant(props) {
  const styles = useStyles();
  const badgeData = {
    color: "",
    secondaryText: "",
  };
  const badgeInit = () => {
    if (!props.subscriptionActive || props.subscriptionActive === false) {
      badgeData.color = "error";
      badgeData.secondaryText = "Aktywuj sybskrypcję";
    } else {
      badgeData.color = "primary";
      badgeData.secondaryText = "Subskrypcja aktywna";
    }
  };
  badgeInit();

  return (
    <ListItem
      button
      onClick={() => props.onClick(`/editRestaurant/${props.id}`)}
    >
      <ListItemIcon>
        <Badge
          className={styles.root}
          anchorOrigin={{ vertical: "top", horizontal: "left" }}
          variant="dot"
          color={badgeData.color}
        >
          <FastfoodIcon />
        </Badge>
      </ListItemIcon>
      <ListItemText
        className={styles.secondary}
        primary={props.name}
        secondary={badgeData.secondaryText}
      />
    </ListItem>
  );
}