import React, { useEffect, useState, memo } from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import ProductCard from "./ProductCard";
import { products } from "../../../constants/product2";
const ProductList = ({ product, isEndReach, item, refreshing }) => {
  // console.log(product);
  const [prod, setprod] = useState([]);

  useEffect(() => {
    setprod(product.splice(1, 20));
  }, []);
  useEffect(() => {
    setprod(product.splice(1, 20));
  }, [refreshing]);
  useEffect(() => {
    // if (isEndReach===true) {
    // console.log("onEndReached event triggered");
    // console.log("item:", item);
    // console.log("product length:", product.length);
    if (item <= product.length) {
      // setprod(product.splice(1, item));

      setprod([...prod, ...product.slice(item, item + 10)]);
      // setitem(item + 10);
    }
    // }
  }, [item]);

  const handleEndReached = () => {};

  return (
    <View style={styles.container}>
      <Text style={styles.header}>For You</Text>
      <View style={styles.wrapper}>
        <MasonryList
          data={prod}
          keyExtractor={(item) => item.id}
          style={styles.list}
          numColumns={2}
          showsVerticalScrollIndicator={false}
          renderItem={({ item }) => (
            <ProductCard product={item} productList={product} />
          )}
          containerStyle={styles.container1}
          contentContainerStyle={styles.content}
        />
        <Text style={styles.loadtext}>Loading...</Text>
      </View>
      <View style={styles.load}>
        <Text style={styles.loadtext}>Loading...</Text>
      </View>
      {/* <Text>Load</Text> */}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    width: "100%",
  },
  container1: {
    width: "100%",
  },
  wrapper: {
    width: "100%",
    height: "100%",
    backgroundColor: "#F3F3F3",
    // padding: 10,
    paddingHorizontal: 5,
    marginTop: 10,
    // marginBottom: 100,
  },
  list: {
    width: "100%",
    height: "100%",
    // backgroundColor: "#fff",
  },
  content: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",

    // backgroundColor: "#ffaa00",
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    textTransform: "uppercase",
    marginLeft: 10,
  },

  img: {
    width: 400,
    height: 200,
    resizeMode: "cover",
    margin: "auto",
    borderRadius: 10,
    // backgroundColor: "#ffaa00",
  },

  load: {
    height: 90,
    width: "100%",
    color: "#ff0000",
    marginBottom: 100,
    justifyContent: "center",
    alignItems: "center",
    zIndex: 99,
    // padding: 20,
    backgroundColor: "#ffaa00",
  },
  loadtext: {
    fontSize: 45,
    fontWeight: "600",
    textTransform: "uppercase",
    // marginLeft: 10,
    // height: 90,
    width: "100%",
    color: "#ff0000",
    // marginBottom: 100,
    zIndex: 99,
    padding: 20,
    backgroundColor: "#ffaa00",
  },
});
// export default ProductList;
export default memo(ProductList);
