import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import Divider from "@material-ui/core/Divider";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import ButtonSecondary from "../Input/ButtonSecondary";
import TextField from "@material-ui/core/TextField";
import AddIcon from "@material-ui/icons/Add";
import { makeStyles } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
import TextFieldsIcon from "@material-ui/icons/TextFields";
import validator from "validator";
import LunchMenu from "./LunchMenu";
import axios from "axios";
import EditCategoriesList from "../Output/EditCategoriesList";
import { notification, refreshUserData } from "../../actions";
import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
import { backend } from "../../config";

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: "#262626",
    color: "#bbbbbb",
    width: "100%",
  },
  expandIcon: {
    color: "#bbbbbb",
  },
  textInputFullWidth: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
    marginLeft: theme.spacing(2),
    flexGrow: 5,
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
    },
    "$ .MuiFormHelperText-root": {
      color: "#bbbbbb",
    },
  },
}));

export default function EditRestaurantMenu(props) {
  const classes = useStyles();
  const { categories, lunchMenu } = props.restaurant;
  const [newCategory, setNewCategory] = useState("");
  const token = useSelector((state) => state.data.userData.jwt);
  const dispatch = useDispatch();

  const addCategory = () => {
    if (validator.isLength(newCategory, { min: 1, max: 20 })) {
      dispatch(showBackdrop());
      const data = {
        restaurantId: props.restaurant._id,
        category: newCategory,
        action: "add",
      };
      axios({
        url: backend + "restaurant/category",
        method: "POST",
        data: data,
        headers: {
          "x-auth-token": token,
        },
      })
        .then((res) => {
          dispatch(hideBackdrop());
          dispatch(notification("Dodano kategorię.", "success"));
          dispatch(refreshUserData());
        })
        .catch((e) => {
          dispatch(hideBackdrop());
          dispatch(notification("Nie udało się dodać kategorii :(", "error"));
          throw e;
        });
    }
  };

  const removeCategory = (categoryName) => {
    dispatch(showBackdrop());
    const data = {
      restaurantId: props.restaurant._id,
      category: categoryName,
      action: "delete",
    };
    axios({
      url: backend + "restaurant/category",
      method: "POST",
      data: data,
      headers: {
        "x-auth-token": token,
      },
    })
      .then((res) => {
        dispatch(hideBackdrop());
        dispatch(notification("Usunięto kategorię.", "success"));
        dispatch(refreshUserData());
      })
      .catch((e) => {
        dispatch(hideBackdrop());
        dispatch(notification("Nie udało się usunąć kategorii :(", "error"));
        throw e;
      });
  };

  return (
    <div className="editRestaurant-tab">
      <div className="editRestaurant-sectiontitle">
        <h4>Menu</h4>
        <Divider />
      </div>
      <EditCategoriesList
        restaurantId={props.restaurant._id}
        lunchMenu={props.restaurant.lunchMenu}
        categories={categories}
        deleteCategory={removeCategory}
      />
      <Accordion className={classes.root}>
        <AccordionSummary
          expandIcon={<AddIcon className={classes.expandIcon} />}
        >
          <h4>Dodaj kategorię</h4>
        </AccordionSummary>
        <div className="editRestaurant-addCategory">
          <TextField
            className={classes.textInputFullWidth}
            value={newCategory}
            onChange={(event) => setNewCategory(event.target.value)}
            label="Nazwa kategorii"
            variant="outlined"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <TextFieldsIcon color="primary" />
                </InputAdornment>
              ),
            }}
          ></TextField>
          <ButtonSecondary onClick={addCategory} text="Dodaj" />
        </div>
      </Accordion>
      <div className="editRestaurant-sectiontitle">
        <h4>Lunch menu</h4>
        <Divider />
      </div>
      <LunchMenu restaurantId={props.restaurant._id} lunchMenu={lunchMenu} />
    </div>
  );
}