import React, { useEffect, useRef } from "react";
import { StyleSheet, Text, View } from "react-native";
import ProductCard from "../main/home/ProductCard";
import MasonryList from "@react-native-seoul/masonry-list";

const Products = ({ prod, item,productList }) => {
  // const [product, setproduct] = useState(ProductCard ?? []);

  // const scrollViewRef = useRef(null);
  // const [item, setitem] = useState(20);
  // const [prods, setprod] = useState([]);

  // useEffect(() => {
  //   setprod(product?.results?.splice(1, item) ?? []);
  //   console.log("length " + products?.results?.length + " item " + item);
  // }, []);
  // console.log("prod is " + products.results);
  // const [isEndReached, setEndReached] = useState(false);
  // useEffect(() => {
  //   if (item <= products?.results?.length) {
  //     setprod([...prod, ...product?.results?.slice(item, item + 10)]);
  //   }
  // }, [item]);
  // useEffect(() => {
  //   setitem(20);
  // }, [products]);
  // const handleScroll = (event) => {
  //   const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
  //   const isAtEnd =
  //     layoutMeasurement.height + contentOffset.y >= contentSize.height - 200;

  //   if (isAtEnd) {
  //     // You've reached the end of the ScrollView
  //     setEndReached(true);
  //     console.log("end here" + item);
  //     if (item <= products?.results?.length) {
  //       setitem(item + 10);
  //     }
  //     // setEndReached(false);
  //     // console.log("item" + item);
  //   }
  // };
  return (
    <View style={styles.container}>
      <View style={styles.wrapper}>
        <MasonryList
          data={prod}
          keyExtractor={(item) => item.id}
          style={styles.list}
          numColumns={2}
          showsVerticalScrollIndicator={false}
          renderItem={({ item }) => <ProductCard productList={productList} product={item} />}
          containerStyle={styles.container1}
          contentContainerStyle={styles.content}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    width: "100%",
  },
  wrapper: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  header: {
    position: "fixed",
    width: "100%",
    top: 0,
    marginBottom: 5,
    marginLeft: 15,
  },
  img: {
    width: 400,
    height: 200,
    resizeMode: "cover",
    margin: "auto",
    borderRadius: 10,
  },
  tabs: {
    height: 80,
    width: "100%",
    position: "absolute",
    bottom: 100,
  },
  tab: {},
});

export default Products;
