/* 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;