import React, { useState } from "react";
import Accordion from "@material-ui/core/Accordion";
import AccordionSummary from "@material-ui/core/AccordionSummary";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import { makeStyles } from "@material-ui/core/styles";
import YesNo from "../Dialogs/YesNo";
import ButtonSecondary from "../Input/ButtonSecondary";
import TextField from "@material-ui/core/TextField";
import AddIcon from "@material-ui/icons/Add";
import InputAdornment from "@material-ui/core/InputAdornment";
import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
import TextFieldsIcon from "@material-ui/icons/TextFields";
import axios from "axios";
import validator from "validator";
import { useDispatch, useSelector } from "react-redux";
import { notification, refreshUserData } from "../../actions";
import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
import { backend } from "../../config";
import Tooltip from "@material-ui/core/Tooltip";
import LunchSetDishList from "../Output/LunchSetDishList";

const useStyles = makeStyles((theme) => ({
  root: {
    backgroundColor: "#262626",
    color: "#bbbbbb",
    width: "100%",
    maxWidth: "800px",
  },
  expandIcon: {
    color: "#bbbbbb",
  },
  textInput: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
    },
    "$ .MuiFormHelperText-root": {
      color: "#bbbbbb",
    },
  },
  textInputWide: {
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
    marginRight: theme.spacing(1),
    marginLeft: theme.spacing(2),
    flexGrow: 5,
    "& .MuiInputBase-root": {
      color: "#bbbbbb",
      borderRadius: "14px"
    },
    "& .MuiInputLabel-root": {
      color: "#bbbbbb",
    },
    "$ .MuiFormHelperText-root": {
      color: "#bbbbbb",
    },
  },
}));

export default function EditCategoriesList(props) {
  const dispatch = useDispatch();
  const [open, setOpen] = useState(false);
  const initialSet = {
    lunchSetName: "",
    lunchSetPrice: "",
    lunchSetDishes: [],
    nameError: false,
    priceError: false,
  };
  const [newSet, setNewSet] = useState(initialSet);
  const [selectedSet, setSelectedSet] = useState(initialSet);
  const token = useSelector((state) => state.data.userData.jwt);
  const classes = useStyles();
  const handleDeleteButton = (set) => {
    setSelectedSet(set);
    setOpen(true);
  };
  const onCancel = () => {
    setOpen(false);
  };
  const onAccept = () => {
    sendForm("delete", selectedSet);
    setOpen(false);
  };

  const SetList = props.lunchMenu.map((set) => {
      return (
        <Accordion key={set.id} className={classes.root}>
          <AccordionSummary
            expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
          >
            <h4>
              {set.lunchSetName} ({set.lunchSetPrice}zł)
            </h4>
            <div className="editRestaurant-categorySpan">
              <Tooltip title="Usuń">
                <IconButton
                  color="primary"
                  component="span"
                  onClick={() => handleDeleteButton(set)}
                >
                  <DeleteIcon />
                </IconButton>
              </Tooltip>
            </div>
          </AccordionSummary>
          <LunchSetDishList lunchSet={set} restaurantId={props.restaurantId} />
        </Accordion>
      );
  });

  // HANDLERS

  const validateForm = () => {
    const validation = {
      nameValid: validator.isLength(newSet.lunchSetName, { min: 1, max: 30 }),
      priceValid: validator.isLength(newSet.lunchSetPrice, { min: 1, max: 12 }),
    };
    setNewSet({
      ...newSet,
      nameError: !validation.nameValid,
      priceError: !validation.priceValid,
    });

    return validation.nameValid && validation.priceValid;
  };

  const sendForm = (action, set) => {
    let valid = false;
    if (action === "add") {
      valid = validateForm();
    } else {
      valid = true;
    }
    if (valid) {
      const data = {
        restaurantId: props.restaurantId,
        action: action,
        set: {
          lunchSetName: set.lunchSetName,
          lunchSetPrice: set.lunchSetPrice,
          lunchSetDishes: set.lunchSetDishes,
        },
      };
      dispatch(showBackdrop());
      axios({
        method: "POST",
        url: backend + "restaurant/lunchSet",
        data: data,
        headers: {
          "x-auth-token": token,
        },
      })
        .then((response) => {
          dispatch(hideBackdrop());
          dispatch(notification("Zmieniono zestaw.", "success"));
          dispatch(refreshUserData());
        })
        .catch((error) => {
          dispatch(hideBackdrop());
          dispatch(notification("Wystąpił błąd.", "error"));
          throw error;
        });
    } else {
      dispatch(notification("Popraw dane.", "error"));
    }
  };

  // COMPONENT

  return (
    <div style={{ width: "100%", display: "flex", flexFlow: "column", alignItems: "center"  }}>
      <YesNo open={open} cancel={onCancel} accept={onAccept} />
      {props.lunchMenu.length === 0 ? <p>Lunch menu puste</p> : SetList}
      <Accordion className={classes.root}>
        <AccordionSummary
          expandIcon={<AddIcon className={classes.expandIcon} />}
        >
          <h4>Dodaj zestaw</h4>
        </AccordionSummary>
        <div className="editRestaurant-addCategory">
          <TextField
            className={classes.textInputWide}
            value={newSet.lunchSetName}
            onChange={(event) =>
              setNewSet({ ...newSet, lunchSetName: event.target.value })
            }
            label="Nazwa zestawu"
            variant="outlined"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <TextFieldsIcon color="primary" />
                </InputAdornment>
              ),
            }}
          ></TextField>
          <TextField
            className={classes.textInput}
            value={newSet.lunchSetPrice}
            onChange={(event) =>
              setNewSet({ ...newSet, lunchSetPrice: event.target.value })
            }
            label="Cena"
            variant="outlined"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AttachMoneyIcon color="primary" />
                </InputAdornment>
              ),
            }}
          ></TextField>
          <ButtonSecondary
            onClick={() => sendForm("add", newSet)}
            text="Dodaj"
          />
        </div>
      </Accordion>
    </div>
  );
}