import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { Button, GridList, GridListTile, Badge } from "@material-ui/core";
import { setSelectedItem } from "./searchSlice";
import { checkItem } from "../core/mainSlice";
import Card from "@material-ui/core/Card";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";

function SapData() {
  const data = useSelector((state) => state.search.search_result);
  const dispatch = useDispatch();
  return (
    <>
      <GridList cellHeight={160} cols={3}>
        {data.map((item) => (
          <GridListTile key={item.id} cols={1}>
            <Card variant="outlined">
              <CardContent>
                <CardActions>
                  <Button
                    size="small"
                    onClick={() => {
                      dispatch(setSelectedItem(item));
                      dispatch(checkItem(item));
                    }}
                  >
                    <Badge color="secondary" badgeContent={0}>
                      <ArrowBackIcon />
                    </Badge>
                    <Typography color="textSecondary" gutterBottom>
                      {item.inventory_id}
                    </Typography>
                  </Button>
                </CardActions>
                <Typography variant="body2" component="p">
                  {item.name}
                </Typography>
                <Typography variant="body2" component="p">
                  {item.owner}
                </Typography>
              </CardContent>
            </Card>
          </GridListTile>
        ))}
      </GridList>
    </>
  );
}

export default SapData;