import { 
  Box, 
  Button, 
  Grid, 
  Theme, 
  Typography 
} from "@mui/material";
import React from "react";
// import ScrollMenu from "react-horizontal-scroll-menu";
// import { useHistory } from "react-router";
import { ArrowForward, ArrowBack } from "@mui/icons-material";
import { useMobile } from "hooks";
import { GrainBag } from "models/GrainBag";
import GrainBagCard from "./grainBagCard";
import { makeStyles } from "@mui/styles";
import { useNavigate } from "react-router-dom";

interface Props {
  grainBags: GrainBag[];
  title?: string;
  gridView?: boolean;
}

const useStyles = makeStyles((theme: Theme) => {
  return ({
    gridListTile: {
      minHeight: "184px",
      height: "auto !important",
      width: "184px",
      padding: 2
    },
    hidden: {
      visibility: "hidden"
    }
  })
});

export default function GrainBagList(props: Props) {
  const { grainBags, title, gridView } = props;
  const classes = useStyles();
  // const history = useHistory();
  const navigate = useNavigate()
  const isMobile = useMobile();

  const goToBag = (i: number) => {
    let path = "/grainbags/" + grainBags[i].key();
    // history.replace(path);
    navigate(path, { replace: true })
  };

  const scroll = () => {
    return (
      <React.Fragment>
        {/* <ScrollMenu
          wheel={false}
          alignCenter={false}
          inertiaScrolling
          hideArrows
          hideSingleArrow
          arrowDisabledClass={classes.hidden}
          onSelect={e => {
            goToBag(e as number);
          }}
          arrowLeft={
            <Button style={{ height: 184, display: isMobile ? "none" : "block" }}>
              <ArrowBack />
            </Button>
          }
          arrowRight={
            <Button style={{ height: 184, display: isMobile ? "none" : "block" }}>
              <ArrowForward />
            </Button>
          }
          data={grainBags.map((b, i) => (
            <Box key={i} className={classes.gridListTile}>
              <GrainBagCard grainBag={b} />
            </Box>
          ))}
        /> */}
      </React.Fragment>
    );
  };

  const grid = () => {
    return (
      <Grid container direction="row">
        {grainBags.map((b, i) => (
          <Box key={i} className={classes.gridListTile} onClick={() => goToBag(i)}>
            <GrainBagCard grainBag={b} />
          </Box>
        ))}
      </Grid>
    );
  };

  return (
    <React.Fragment>
      {title && <Typography>{title}</Typography>}
      {/* {gridView ? grid() : scroll()} */}
      {grid()}
    </React.Fragment>
  );
}