import BorderImage from "./borderImage";
import InfiniteScroll from "react-infinite-scroll-component";
import { useEffect, useState } from "react";
import styles from "../styles/Components.module.css";

const pageSize = 48;

export default function Select(props) {
  const { data, total, onSelect, selected = {} } = props;
  // console.log("data", data, "selected", selected, total);

  const [scrollIndex, setScrollIndex] = useState(36);
  const [scrollData, setScrollData] = useState([]);

  useEffect(() => {
    setScrollData(data.slice(0, pageSize - 1));
  }, [data]);

  const fetchMore = () => {
    let newData = data.slice(scrollIndex, scrollIndex + pageSize);
    setScrollData([...scrollData, ...newData]);
    setScrollIndex(scrollIndex + pageSize);
  };

  return (
    <InfiniteScroll
      dataLength={scrollData?.length || 0}
      next={fetchMore}
      hasMore={total > scrollData?.length || 0}
      height={"75vh"}
      className={styles.select}
      loader={<h4>Loading...</h4>}
      endMessage={<h4>No more borders.</h4>}>
      {scrollData &&
        scrollData.map((border, index) => {
          return (
            <BorderImage
              key={border.id}
              border={border}
              selected={selected}
              onSelect={onSelect}
            />
          );
        })}
    </InfiniteScroll>
  );
}