/* eslint-disable */
import React, { useState } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { useAlert } from 'react-alert';
import clsx from 'clsx';
import moment from 'moment';
import { Drawer as AntDrawer } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { updateMenu } from 'src/slices/menu';
import { useSnackbar } from 'notistack';
import CardForm from './MenuCardForm'
import {
Box,
Button,
Card,
CardMedia,
CardContent,
CardActions,
CardHeader,
Divider,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Grid,
Collapse,
Link,
SvgIcon,
Typography,
colors,
makeStyles
} from '@material-ui/core';
import IconButton from '@material-ui/core/IconButton';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { PlusCircle as PlusIcon } from 'react-feather';
import { Edit as EditIcon, Trash2 as DeleteIcon } from 'react-feather';
import MenuModal from '../MenuModal';
const useStyles = makeStyles(theme => ({
root: {},
media: {
height: 200,
backgroundColor: theme.palette.background.dark
},
drawerButton: {
marginTop: theme.spacing(1)
},
likedButton: {
color: colors.red[600]
},
subscribersIcon: {
marginLeft: theme.spacing(2),
marginRight: theme.spacing(1)
},
actionIcon: {
marginRight: theme.spacing(1)
},
deleteButton: {
backgroundColor: '#d9534f'
},
deleteText: {
color: '#d9534f'
},
subMenu: {
padding: theme.spacing(2)
},
expand: {
transform: 'rotate(0deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest
})
},
expandOpen: {
transform: 'rotate(180deg)'
}
}));
function MenuCard({ menuItem, className, ...rest }) {
const classes = useStyles();
const dispatch = useDispatch();
const { result } = useSelector(state => state.menu);
const { enqueueSnackbar } = useSnackbar();
const [antDrawer, toggleAntDrawer] = useState(false);
const [secondAntDrawer, toggleSecondAntDrawer] = useState(false);
const [selectedSubMenu, setSubMenu] = useState({
name: '',
items: [],
index: ''
});
const [expanded, setExpanded] = useState(false);
const [isOpened, setOpened] = useState(false);
const [dialogOpen, setDialog] = useState({
open: false,
item: {},
index: null
});
// Close Ant drawer
const antOnClose = () => {
toggleAntDrawer(false);
};
// Close 2 level Ant drawer
const secondAntOnClose = () => {
toggleSecondAntDrawer(false);
};
//Card Modal handle open
const handleOpen = () => {
setOpened(true);
};
//Card Modal handle close
const handleClose = () => {
setOpened(false);
};
const handleSecondDrawer = (bool, item, index) => {
// Open second stage drawer
toggleSecondAntDrawer(bool);
setSubMenu({ name: item.name, items: item.items, index: index });
};
const handleCloseDialog = () => {
setDialog({ ...dialogOpen, open: false });
};
const handleExpandClick = () => {
setExpanded(!expanded);
};
const handleDelete = (item, index) => {
const menu = _.cloneDeep(menuItem);
let update = menu.sections[selectedSubMenu.index].items.splice([index], 1);
// console.log(menu.sections[selectedSubMenu.index].items[index], 'item to be updated/deleted')
// console.log(update)
// console.log(menu.sections[selectedSubMenu.index].items[index], 'item to be updated/deleted')
dispatch(updateMenu(menu));
setDialog({ ...dialogOpen, open: false });
setTimeout(() => {
enqueueSnackbar(`${item.name} slettet`, {
variant: 'success',
classes:{},
anchorOrigin: {
vertical: 'bottom',
horizontal: 'center'
}
});
}, 200);
};
return (
<>
<Card className={clsx(classes.root, className)} {...rest}>
<Box p={3}>
{menuItem.image && (
<CardMedia className={classes.media} image={menuItem.image || ''} />
)}
<Box display="flex" alignItems="center" mt={2}>
<Box>
<Typography variant="body2" color="textSecondary">
<Link
color="textPrimary"
component={RouterLink}
to="#"
variant="h3"
>
{menuItem.name}
</Link>{' '}
| Updated {moment(menuItem.createdAt).fromNow()}
</Typography>
</Box>
</Box>
</Box>
{/* <Box pb={2} px={3}>
<Typography color="textSecondary" variant="body2">
Description
</Typography>
<Typography variant="h5" color="textPrimary">
{menuItem.desc}
</Typography>
</Box> */}
{/* <Box py={2} px={3}>
<Grid
alignItems="center"
container
justify="space-between"
spacing={3}
>
<Grid item>
<Typography variant="body2" color="textSecondary">
Type
</Typography>
<Typography variant="h5" color="textPrimary">
{menuItem.type}
</Typography>
</Grid>
<Grid item>
<Typography variant="body2" color="textSecondary">
Price
</Typography>
<Typography variant="h5" color="textPrimary">
{menuItem.price}
</Typography>
</Grid>
</Grid>
</Box> */}
<Divider />
<Box
py={2}
pl={2}
pr={3}
display="flex"
alignItems="center"
justifyContent="space-between"
>
<Button color="secondary" variant="contained" onClick={handleOpen}>
<SvgIcon fontSize="small" className={classes.actionIcon}>
<EditIcon />
</SvgIcon>
Rediger
</Button>
<Button className={classes.deleteButton} variant="contained">
<SvgIcon fontSize="small" className={classes.actionIcon}>
<DeleteIcon />
</SvgIcon>
Slett
</Button>
</Box>
{/* Modal Card for menu items */}
<MenuModal open={isOpened} onClose={handleClose} menuItem={menuItem} />
</Card>
<Button
variant="outlined"
color="primary"
className={classes.drawerButton}
onClick={() => toggleAntDrawer(true)}
>
Se undermeny til {menuItem.name}
</Button>
<AntDrawer
placement="right"
title={menuItem.name}
width={420}
bodyStyle={{ backgroundColor: '#1c2025' }}
closable={true}
onClose={antOnClose}
visible={antDrawer}
zIndex={5000}
>
<div>
<Button type="primary" onClick={() => toggleSecondAntDrawer(true)}>
Under-menyene til {menuItem.name}:
</Button>
{menuItem.sections.map((item, index) => (
<Box key={item.name} mb={1}>
<Card
className={classes.subMenu}
style={{ cursor: 'pointer' }}
onClick={() => handleSecondDrawer(true, item, index)}
>
<Typography>{item.name} {`(${item.items.length})`}</Typography>
</Card>
</Box>
))}
<Box mt={2} mb={2}>
<Divider variant="fullWidth" />
</Box>
<Card className={classes.subMenu}>
<Typography>Ny</Typography>
</Card>
</div>
<AntDrawer
title={selectedSubMenu.name}
width={520}
closable={true}
bodyStyle={{ backgroundColor: '#1c2025' }}
onClose={secondAntOnClose}
visible={secondAntDrawer}
zIndex={5000}
>
{selectedSubMenu.items.map((item, index) => (
<Box key={item.name} mb={1}>
<Card className={classes.subMenu}>
<CardHeader
action={
<Button
className={classes.deleteButton}
variant="contained"
size="small"
onClick={() =>
setDialog({ open: true, item: item, index: index })
}
>
<SvgIcon fontSize="small" className={classes.actionIcon}>
<DeleteIcon />
</SvgIcon>
Slett
</Button>
}
title={item.name}
subheader={item.description}
/>
<CardActions disableSpacing>
<Button
variant="contained"
color="primary"
size="small"
onClick={handleExpandClick}
>
Rediger
</Button>
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
{/* Send in details about item, index of item, submenu clicked and menu selected */}
<CardForm
item={item}
index={index}
menuItem={menuItem}
subMenu={selectedSubMenu}
/>
</CardContent>
</Collapse>
</Card>
</Box>
))}
</AntDrawer>
</AntDrawer>
<Dialog
open={dialogOpen.open}
style={{ zIndex: 9000 }}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
<Typography className={classes.deleteText}>
Slett {dialogOpen.item.name}
</Typography>
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Denne handlingen vil slette {dialogOpen.item.name}. Er du sikker at
du vil gjøre dette?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
onClick={handleCloseDialog}
variant="contained"
color="primary"
>
Avbryt
</Button>
{/* Send item and index of item to be deleted. */}
<Button
onClick={() => handleDelete(dialogOpen.item, dialogOpen.index)}
className={classes.deleteButton}
variant="outlined"
autoFocus
>
Slett
</Button>
</DialogActions>
</Dialog>
</>
);
}
MenuCard.propTypes = {
className: PropTypes.string
// menuItem: PropTypes.array.isRequired
};
export default MenuCard;