import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit";
import Switch from "@material-ui/core/Switch";
import axios from "axios";
import { backend } from "../../config";
import YesNo from "../Dialogs/YesNo";
import { notification, fetchAllDishes, refreshUserData } from "../../actions";
import Tooltip from "@material-ui/core/Tooltip";
import FastfoodIcon from "@material-ui/icons/Fastfood";
import AddToSet from "../Dialogs/AddToSet";
import { hideBackdrop, showBackdrop } from "../../actions/toggles";

export default function EditDishList(props) {
  const [open, setOpen] = useState(false);
  const [setListOpen, setSetListOpen] = useState(false);
  const [selectedDish, setDish] = useState("");
  const history = useHistory();
  const dispatch = useDispatch();
  const token = useSelector((state) => state.data.userData.jwt);
  const filterDishes = (dishes, category) => {
    var result = [];
    dishes.map((dish) => {
      if (dish.category === category) {
        result.push(dish);
      }
      return true;
    });
    return result;
  };

  const handleSetDishVisibility = (dishId, visible) => {
    const data = {
      dishId: dishId,
      visible: visible,
    };
    axios({
      method: "POST",
      url: backend + "/dish/hidden",
      data: data,
      headers: {
        "x-auth-token": token,
      },
    })
      .then((res) => {
        dispatch(fetchAllDishes(props.restaurantId));
        dispatch(notification("Zmieniono widoczność dania.", "success"));
      })
      .catch((error) => {
        dispatch(notification("Nie udało się zmienić :(", "error"));
      });
  };

  const selectDish = (dishId) => {
    setDish(dishId);
    setOpen(true);
  };

  const onCancel = () => {
    setOpen(false);
  };
  const onAccept = () => {
    setOpen(false);
    axios({
      method: "DELETE",
      url: backend + "/dish",
      data: {
        dishId: selectedDish,
      },
      headers: {
        "x-auth-token": token,
      },
    })
      .then((res) => {
        dispatch(fetchAllDishes(props.restaurantId));
        dispatch(notification("Usunięto.", "success"));
      })
      .catch((error) => {
        dispatch(notification("Nie udało się usunąć :(", "error"));
      });
  };

  const handleAddToSet = (dishId) => {
    setDish(dishId);
    setSetListOpen(true);
  };

  const addToSet = (setName, quantity) => {
    setSetListOpen(false);
    const data = {
      setName: setName,
      restaurantId: props.restaurantId,
      dishId: selectedDish,
      quantity: quantity,
      action: "add",
    };
    dispatch(showBackdrop());
    axios({
      method: "POST",
      url: backend + "restaurant/lunch",
      data: data,
      headers: {
        "x-auth-token": token,
      },
    })
      .then((response) => {
        dispatch(hideBackdrop());
        dispatch(notification("Dodano do zestawu.", "success"));
        dispatch(refreshUserData());
      })
      .catch((error) => {
        dispatch(hideBackdrop());
        dispatch(notification("Wystąpił błąd.", "error"));
      });
  };

  const allDishes = useSelector((state) => state.dishes);
  const thisCategoryDishes = filterDishes(allDishes, props.category);
  const Dishes = thisCategoryDishes.map((dish) => {
    return (
      <ListItem key={dish._id}>
        <div className="editRestaurant-dish">
          <div className="editRestaurant-dishLeft">
            <div
              className="editRestaurant-dishImg"
              style={
                dish.imgUrl !== "empty"
                  ? { backgroundImage: `url(${dish.imgUrl})` }
                  : { backgroundColor: "#7e7e7e" }
              }
            ></div>
            <h3>{dish.name}</h3>
          </div>
          <div className="editRestaurant-dishRight">
            <Tooltip title="Widoczność">
              <Switch
                checked={!dish.hidden}
                onClick={() => handleSetDishVisibility(dish._id, dish.hidden)}
              />
            </Tooltip>
            <Tooltip title="Usuń">
              <IconButton
                color="primary"
                component="span"
                onClick={() => selectDish(dish._id)}
              >
                <DeleteIcon />
              </IconButton>
            </Tooltip>
            <Tooltip title="Edytuj">
              <IconButton
                color="primary"
                component="span"
                onClick={() => history.push(`/editDish/${dish._id}`)}
              >
                <EditIcon />
              </IconButton>
            </Tooltip>
            <Tooltip title="Dodaj do zestawu">
              <IconButton
                color="primary"
                component="span"
                onClick={() => handleAddToSet(dish._id)}
              >
                <FastfoodIcon />
              </IconButton>
            </Tooltip>
          </div>
        </div>
      </ListItem>
    );
  });

  return (
    <List>
      <YesNo open={open} cancel={onCancel} accept={onAccept} />
      <AddToSet
        lunchMenu={props.lunchMenu}
        open={setListOpen}
        cancel={() => setSetListOpen(false)}
        add={(setName, quantity) => addToSet(setName, quantity)}
      />
      {thisCategoryDishes.length === 0 ? (
        <ListItem style={{ marginLeft: "14px", fontSize: "12px" }}>
          Kategoria pusta
        </ListItem>
      ) : (
        Dishes
      )}
    </List>
  );
}