import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import {
  Typography,
  Button,
  Grid,
  TextField,
  ButtonGroup,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  IconButton,
  Paper,
} from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";
import AddIcon from "@material-ui/icons/Add";
import RemoveIcon from "@material-ui/icons/Remove";
import ErrorIcon from "@material-ui/icons/Error";
import {
  writeConfigRequest,
  useConfigInMainRequest,
} from "secure-electron-store";
import { connect } from "react-redux";

import { closeEditModal } from "Redux/modals/editItemModalSlice";
import { editItem } from "../../redux/data/inventorySlice";

const useStyles = makeStyles((theme) => ({
  paper: {
    paddingTop: theme.spacing(0.5),
    paddingBottom: theme.spacing(0.5),
    paddingRight: theme.spacing(1),
    paddingLeft: theme.spacing(1),
    color: theme.palette.text.secondary,
    display: "flex",
    alignItems: "center",
  },
  paperTitle: {
    paddingRight: theme.spacing(2.5),
    paddingLeft: theme.spacing(2.5),
    marginBottom: theme.spacing(0.5),
  },
  verticalSpacing: {
    marginBottom: theme.spacing(0.5),
  },
  verticalSpacing2: {
    marginBottom: theme.spacing(2),
  },
}));

const EditItemModal = (props) => {
  useEffect(() => {
    window.api.store.send(useConfigInMainRequest);
  }, []);
  const styles = useStyles();

  useEffect(() => {
    if (props.editItemModal.visibility == false) {
      resetModalState();
    }
    if (props.editItems.length > 1) {
      setEditMultipleState(true);
      resetModalState();
    } else {
      setEditMultipleState(false);

      const item = props.inventory.items.filter((items) => {
        return items.id == props.editItems[0];
      });
      if (item[0]) {
        setProdName(item[0].name);
        setProdId(item[0].sku);
        setProdCost(item[0].cost);
        setProdCostTax(item[0].costTax);
        setProdCostShip(item[0].costShipping);
        setProdStore(item[0].store);
        setProdDate(
          [
            new Date(item[0].dateObtained).getFullYear(),
            ("0" + (new Date(item[0].dateObtained).getMonth() + 1)).slice(-2),
            ("0" + new Date(item[0].dateObtained).getDate()).slice(-2),
          ].join("-")
        );
        setProdDesc(item[0].description);
        setProdSize(item[0].size);
      }
    }
  }, [props.editItemModal.visibility]);

  const editItems = () => {
    let newItems = [];
    let indices = [];
    let itemsToEdit = props.inventory.items.filter((items) => {
      return props.editItems.includes(items.id);
    });
    let remainingItems = props.inventory.items.filter((items) => {
      return !props.editItems.includes(items.id);
    });

    itemsToEdit.map((item) => {
      newItems.push({
        ...item,
        ...(prodName !== "" && { name: prodName }),
        ...(prodId !== "" && { sku: prodId }),
        ...(prodCost !== 0 && { cost: parseFloat(prodCost).toFixed(2) }),
        ...(prodCostTax !== 0 && {
          costTax: parseFloat(prodCostTax).toFixed(2),
        }),
        ...(prodCostShip !== 0 && {
          costShipping: parseFloat(prodCostShip).toFixed(2),
        }),
        ...(prodStore !== "" && { store: prodStore }),
        ...(prodSize !== "—" && { size: prodSize }),
        ...(prodDate !== "" && {
          dateObtained: new Date(prodDate).toLocaleDateString("en-US"),
        }),
        ...(prodDesc !== "" && {
          description: prodDesc,
        }),
      });
    });

    newItems.map((newItem) => {
      indices.push(
        props.inventory.items.findIndex((item) => item.id === newItem.id)
      );
    });
    props.editItem({ indices, newItems });
    window.api.store.send(writeConfigRequest, "inventoryItems", [
      ...remainingItems,
      ...newItems,
    ]);
    props.closeEditModal();
  };

  const [prodName, setProdName] = useState("");
  const [prodId, setProdId] = useState("");
  const [prodCost, setProdCost] = useState(0);
  const [prodCostTax, setProdCostTax] = useState(0);
  const [prodCostShip, setProdCostShip] = useState(0);
  const [prodStore, setProdStore] = useState("");
  const [prodDate, setProdDate] = useState("");
  const [prodDesc, setProdDesc] = useState("");
  const [prodSize, setProdSize] = useState("—");

  const [editMultipleState, setEditMultipleState] = useState(false);

  const resetModalState = () => {
    setProdName("");
    setProdId("");
    setProdCost(0);
    setProdCostTax(0);
    setProdCostShip(0);
    setProdStore("");
    setProdDate("");
    setProdDesc("");
    setProdSize("—");
  };

  const [sizeType, setSizeType] = useState("sneakers");
  const shoeSizes = [
    3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12,
    12.5, 13, 13.5, 14, 15,
  ];
  const apparelSizes = ["XS", "S", "M", "L", "XL", "2XL", "3XL", "4XL"];
  const otherSizes = ["N/A", "OS", "Custom"];

  return (
    <>
      <Dialog
        open={props.editItemModal.visibility}
        aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">
          {editMultipleState
            ? `Mass Edit — ${props.editItems.length} items selected`
            : "Edit Item"}
        </DialogTitle>
        <DialogContent>
          <Grid container spacing={1}>
            {editMultipleState && (
              <Grid item xs={12} className={styles.verticalSpacing}>
                <Paper className={styles.paper}>
                  <ErrorIcon style={{ marginRight: "0.4rem" }} />
                  <Typography variant="button" style={{ fontSize: "0.8rem" }}>
                    changes will be applied to all items selected.
                  </Typography>
                </Paper>
              </Grid>
            )}

            <Grid
              container
              item
              xs={12}
              spacing={1}
              className={styles.verticalSpacing}>
              <Grid item xs={8}>
                <TextField
                  id="prodName"
                  label="Product Name"
                  variant="filled"
                  size="small"
                  fullWidth
                  value={prodName}
                  onChange={(e) => {
                    setProdName(e.target.value);
                  }}
                />
              </Grid>
              <Grid item xs={4}>
                <TextField
                  id="prodId"
                  label="Product ID"
                  variant="filled"
                  size="small"
                  fullWidth
                  value={prodId}
                  onChange={(e) => {
                    setProdId(e.target.value);
                  }}
                />
              </Grid>
            </Grid>
            <Grid
              container
              item
              xs={12}
              spacing={1}
              className={styles.verticalSpacing}>
              <Grid item xs={4}>
                <TextField
                  id="prodCost"
                  label="Cost"
                  variant="filled"
                  size="small"
                  fullWidth
                  value={prodCost}
                  onChange={(e) => {
                    setProdCost(e.target.value);
                  }}
                />
              </Grid>
              <Grid item xs={4}>
                <TextField
                  id="prodCostTax"
                  label="Tax"
                  variant="filled"
                  size="small"
                  value={prodCostTax}
                  fullWidth
                  onChange={(e) => {
                    setProdCostTax(e.target.value);
                  }}
                />
              </Grid>
              <Grid item xs={4}>
                <TextField
                  id="prodCostShip"
                  label="Shipping"
                  variant="filled"
                  size="small"
                  fullWidth
                  value={prodCostShip}
                  onChange={(e) => {
                    setProdCostShip(e.target.value);
                  }}
                />
              </Grid>
            </Grid>
            <Grid
              container
              item
              xs={12}
              spacing={1}
              className={styles.verticalSpacing2}>
              <Grid item xs={6}>
                <TextField
                  id="prodStore"
                  label="Store Purchased"
                  variant="filled"
                  size="small"
                  fullWidth
                  value={prodStore}
                  onChange={(e) => {
                    setProdStore(e.target.value);
                  }}
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  id="prodDate"
                  label="Purchase Date"
                  variant="filled"
                  size="small"
                  type="date"
                  fullWidth
                  value={prodDate}
                  onChange={(e) => {
                    setProdDate(e.target.value);
                  }}
                  InputLabelProps={{
                    shrink: true,
                  }}
                />
              </Grid>
            </Grid>
            <Grid
              container
              spacing={1}
              alignItems="center"
              className={styles.verticalSpacing}>
              <Grid item style={{ marginLeft: 5 }}>
                <Paper className={styles.paper}>
                  <Typography variant="h5">Size: {prodSize}</Typography>
                </Paper>
              </Grid>
              <Grid
                container
                item
                xs
                justify="flex-end"
                style={{ marginRight: 12 }}>
                <ButtonGroup color="primary">
                  <Button
                    variant={sizeType == "sneakers" ? "contained" : ""}
                    onClick={() => {
                      setSizeType("sneakers");
                    }}>
                    Sneakers
                  </Button>
                  <Button
                    variant={sizeType == "apparel" ? "contained" : ""}
                    onClick={() => {
                      setSizeType("apparel");
                    }}>
                    Apparel
                  </Button>
                  <Button
                    variant={sizeType == "other" ? "contained" : ""}
                    onClick={() => {
                      setSizeType("other");
                    }}>
                    Other
                  </Button>
                </ButtonGroup>
              </Grid>
            </Grid>
            <Grid
              container
              item
              xs={12}
              spacing={1}
              justify="center"
              className={styles.verticalSpacing2}>
              {sizeType == "sneakers"
                ? shoeSizes.map((size) => (
                    <Grid item key={size}>
                      <Button
                        variant="contained"
                        color="primary"
                        size="small"
                        onClick={() => {
                          setProdSize(size);
                        }}
                        disabled={size == prodSize}>
                        {size}
                      </Button>
                    </Grid>
                  ))
                : sizeType == "apparel"
                ? apparelSizes.map((size) => (
                    <Grid item key={size}>
                      <Button
                        variant="contained"
                        color="primary"
                        size="small"
                        onClick={() => {
                          setProdSize(size);
                        }}
                        disabled={size == prodSize}>
                        {size}
                      </Button>
                    </Grid>
                  ))
                : otherSizes.map((size) => (
                    <Grid item key={size}>
                      {size.toLowerCase() == "custom" ? (
                        <Button
                          variant="outlined"
                          color="primary"
                          size="small"
                          onClick={() => {
                            setProdSize(size);
                          }}>
                          {size}
                        </Button>
                      ) : (
                        <Button
                          variant="contained"
                          color="primary"
                          size="small"
                          onClick={() => {
                            setProdSize(size);
                          }}
                          disabled={size == prodSize}>
                          {size}
                        </Button>
                      )}
                    </Grid>
                  ))}
            </Grid>

            <Grid container xs={12}>
              <TextField
                id="prodDesc"
                label="Description"
                multiline
                rows={3}
                variant="filled"
                size="small"
                type="date"
                value={prodDesc}
                onChange={(e) => {
                  setProdDesc(e.target.value);
                }}
                fullWidth
              />
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button
            color="primary"
            onClick={() => {
              props.closeEditModal();
            }}>
            Cancel
          </Button>
          <Button
            color="primary"
            onClick={() => {
              editItems();
            }}>
            {editMultipleState ? "Edit Items" : "Edit Item"}
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

const mapStateToProps = (state, props) => ({
  editItemModal: state.editItemModal,
  inventory: state.inventory,
});
const mapDispatch = { closeEditModal, editItem };

export default connect(mapStateToProps, mapDispatch)(EditItemModal);