import { 
  Box, 
  Button, 
  Grid2 as Grid, 
  Typography 
} from "@mui/material";
import { Bin } from "models";
import React, { useContext, useState } from "react";
import { ArrowForward, ArrowBack, Replay } from "@mui/icons-material";
import { useMobile } from "hooks";
import BinCardV2 from "./BinCardV2";
import { makeStyles } from "@mui/styles";
import { useNavigate } from "react-router-dom";
import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";
import 'react-horizontal-scrolling-menu/dist/styles.css';

interface Props {
  bins: Bin[];
  duplicateBin: (bin: Bin) => void;
  title?: string;
  gridView?: boolean;
  loadMore?: () => void;
  //startingTranslate: number;
  valDisplay?: "high" | "low" | "average";
}

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

export default function BinsList(props: Props) {
  const { bins, duplicateBin, title, gridView, loadMore, valDisplay } = props;
  const classes = useStyles();
  // const history = useHistory();
  const navigate = useNavigate()
  const isMobile = useMobile();
  const [duplicate, setDuplicate] = useState(false);
  //const scrollRef = useRef<any>(null);

  const goToBin = (i: number) => {
    let path = "/bins/" + bins[i].key();
    navigate(path, { state: {bin: bins[i]} });
  };

  const leftArrow = () => {
    const visibility = useContext(VisibilityContext);
    //const isFirstVisible = visibility.useIsVisible('first', false)
    return (
          <Button onClick={() => visibility.scrollPrev()} style={{ height: 233, display: isMobile ? "none" : "block" }}>
            <ArrowBack />
          </Button>
    )
  }

  const rightArrow = () => {
    const visibility = useContext(VisibilityContext);
    const isLastVisible = visibility.useIsVisible('last', false)
    return (
          <Button 
            style={{ height: 233, display: isMobile ? "none" : "block" }}
            onClick={() => {
              if (isLastVisible) {
                loadMore && loadMore()
              }else {
                visibility.scrollNext()
              }
              }}>
            {isLastVisible ? <Replay /> : <ArrowForward />}
          </Button>
    )
  }

  const scroll = () => {
    //const visibility = useContext(VisibilityContext);
    return (
      <ScrollMenu 
        LeftArrow={leftArrow} 
        RightArrow={rightArrow}>
        {bins.map((b, i) => (
          <Box 
            key={i} 
            className={classes.gridListTile} 
            onClick={() => {
                !duplicate && goToBin(i)
              }}>
            <BinCardV2
              bin={b}
              duplicateBin={duplicateBin}
              dupHovered={setDuplicate}
              valDisplay={valDisplay}
            />
          </Box>
        ))}
      </ScrollMenu>
    )
  }

  const grid = () => {
    return (
      <Grid container direction="row">
        {bins.map((b, i) =>
          isMobile ? (
            <Grid
              size={{
                xs: 6,
                sm: 4,
                md: 3,
                lg: 2,
              }}
              key={i}
              className={classes.gridListTile}
              onClick={() => goToBin(i)}>
              <BinCardV2
                bin={b}
                duplicateBin={duplicateBin}
                dupHovered={setDuplicate}
                valDisplay={valDisplay}
              />
            </Grid>
          ) : (
            <Box
              key={i}
              style={{ width: "184px" }}
              className={classes.gridListTile}
              onClick={() => goToBin(i)}>
              <BinCardV2
                bin={b}
                duplicateBin={duplicateBin}
                dupHovered={setDuplicate}
                valDisplay={valDisplay}
              />
            </Box>
          )
        )}
      </Grid>
    );
  };

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