import React, { Dispatch, SetStateAction, useContext } from 'react';
import {
  Dialog,
  List,
  ListItem,
  ListItemText,
  DialogTitle,
  Typography,
  IconButton,
  Divider,
  ListItemIcon,
} from '@material-ui/core';
import { TicketType } from 'common/types';
import CloseIcon from '@material-ui/icons/Close';
import { useStyles } from './styles/categories-list-dialog-styles';
import RemoveCircleIcon from '@material-ui/icons/RemoveCircle';
import { AppContext } from 'context/app-context';

interface CategoriesDialogProps {
  open: boolean;
  items: TicketType[];
  setDialogOpened: Dispatch<SetStateAction<boolean>>;
}

export const CategoriesListDialog: React.FC<CategoriesDialogProps> = ({
  open,
  items = [],
  setDialogOpened,
}) => {
  const classes = useStyles();

  const { dispatch } = useContext(AppContext);

  const handleRemoveTicket = (ticket: TicketType) => {
    return dispatch({
      type: 'ticket/remove',
      payload: ticket,
    });
  };

  return (
    <Dialog
      open={open}
      fullWidth
      maxWidth="xs"
      classes={{ paper: classes.dialog }}
    >
      <DialogTitle className={classes.title}>
        <Typography>Úprava výběru</Typography>
        <IconButton
          className={classes.closeButton}
          onClick={e => setDialogOpened(false)}
        >
          <CloseIcon />
        </IconButton>
      </DialogTitle>
      <Divider />
      <List>
        {items.map((item, index) => (
          <ListItem button key={`${item.label}-${index}`}>
            <ListItemIcon onClick={() => handleRemoveTicket(item)}>
              <RemoveCircleIcon color="error" />
            </ListItemIcon>
            <ListItemText primary={item.label} />
          </ListItem>
        ))}
      </List>
    </Dialog>
  );
};
