import React from "react";
import { useTranslation } from "react-i18next";
import {
  List,
  ListItem,
  ListItemText,
  Button,
  Drawer,
  Divider,
} from "@material-ui/core";
import CancelPresentationIcon from "@material-ui/icons/CancelPresentation";
import { useSelector } from "react-redux";

function History() {
  const { t } = useTranslation();
  const history = useSelector((state) => state.search.history);
  const [open, setOpen] = React.useState(false);
  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  return (
    <>
      <Button variant="contained" color="primary" onClick={handleDrawerOpen}>
        {t("history.History.History")}
      </Button>
      <Drawer variant="persistent" anchor="left" open={open}>
        <CancelPresentationIcon onClick={handleDrawerClose} />
        {t("history.History.ListName")}
        <Divider />
        <List>
          {history.map((item, index) => (
            <ListItem button key={index}>
              <ListItemText secondary={item.label_id} />
              <ListItemText primary={item.inventory_id} />
            </ListItem>
          ))}
        </List>
      </Drawer>
    </>
  );
}

export default History;