import React, { useEffect, useState, memo } from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import ProductCard from "./ProductCard";
import ShopCard from "./ShopCard";
const ShopList = ({ vendors, item, refreshing, product }) => {
  const [itemCount, setitemCount] = useState(10);
  const info = `
  <h3>Product Name</h3>
<p>Uploading your app to TestFlight and Google Play beta can be time-consuming (for example, waiting for the build to run through static analysis before becoming available to testers) and limiting (for example, TestFlight can only have one active build at a time). Both Android and iOS provide alternative mechanisms to distribute apps directly to testers, so they can download and install them to physical devices directly from a web browser as soon as the builds are completed.</p>
<p>EAS Build can help you with this by providing shareable URLs for your builds with instructions on how to get them running, so you can share a single URL with a teammate that'll include all of the information they need to test the app.</p>
<p></p>
<div>
<img src="https://i02.appmifile.com/mi-com-product/fly-birds/xiaomi-pad-6-keyboard/m/0406942d4fa798f7cba904800f2ef95a.jpg" style="margin:0!important; padding:0!important;position:relative;" alt="Xiaomi Pad 6 Camera Closeup" >
</div>
<h3 style="text-align: center;"><strong>Xiaomi Pad 6</strong>&nbsp;specs</h3>
<p style="text-align: center;">11-inch WQHD+ (2880 x 1800) IPS LCD<br>144Hz refresh rate, DCI-P3, 309 ppi, Dolby Vision<br>Corning Gorilla Glass 3<br>Snapdragon 870 chipset<br>8-cores, up to 3.2GHz frequency<br>6, 8GB RAM<br>128, 256GB storage<br>13MP f/2.2 rear<br>8MP f/2.2 selfie shooter<br>Wi-Fi 6<br>Bluetooth 5.2<br>USB Type-C<br>Quad speakers, Dolby Atmos<br>MIUI Pad 14<br>8840mAh battery<br>33W charging rate<br>490g<br>Gravity Gray, Gold, Mist Blue</p>
<table style="height: 179px; width: 100%; margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="width: 9.1612%;">Minor</th>
<th style="width: 18.5122%;">Branch</th>
<th style="width: 37.5608%;">Documentation</th>
<th style="width: 32.3664%;">Latest</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 9.1612%;">next</td>
<td style="width: 18.5122%;">master</td>
<td style="width: 37.5608%;">-</td>
<td style="width: 32.3664%;"><a href="https://www.npmjs.com/package/react-native-render-html#"><img src="https://camo.githubusercontent.com/f3215ce1ad3f67dccd657027c0600388714fd781ef05b146dc906828186fd13b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f6e657874" alt="npm" data-canonical-src="https://img.shields.io/npm/v/react-native-render-html/next"></a></td>
</tr>
<tr>
<td style="width: 9.1612%;">6.3</td>
<td style="width: 18.5122%;"><a href="https://github.com/meliorence/react-native-render-html/tree/release/6.3">release/6.3</a></td>
<td style="width: 37.5608%;"><a href="https://meliorence.github.io/react-native-render-html/" rel="nofollow">Official Website</a></td>
<td style="width: 32.3664%;"><a href="https://www.npmjs.com/package/react-native-render-html#"><img src="https://camo.githubusercontent.com/1d647fdaa57a9ecbaabe231319ff37b900429af34c55393d2d348870a98f9215/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f362e33" alt="npm" data-canonical-src="https://img.shields.io/npm/v/react-native-render-html/release/6.3"></a></td>
</tr>
<tr>
<td style="width: 9.1612%;">5.1&nbsp;&nbsp;</td>
<td style="width: 18.5122%;"><a href="https://github.com/meliorence/react-native-render-html/tree/release/5.1">release/5.1</a>&nbsp;&nbsp;</td>
<td style="width: 37.5608%;"><a href="https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md">release/5.1/README.md</a></td>
<td style="width: 32.3664%;"><a href="https://www.npmjs.com/package/react-native-render-html#"><img src="https://camo.githubusercontent.com/e0f61d83694ea428d9b745480ccc1cd47eb788e679357b1ef8820d7c472c779a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f352e31" alt="npm" data-canonical-src="https://img.shields.io/npm/v/react-native-render-html/release/5.1"></a></td>
</tr>
<tr>
<td style="width: 9.1612%;">4.2&nbsp;&nbsp;</td>
<td style="width: 18.5122%;"><a href="https://github.com/meliorence/react-native-render-html/tree/release/4.2">release/4.2</a>&nbsp;&nbsp;</td>
<td style="width: 37.5608%;"><a href="https://github.com/meliorence/react-native-render-html/blob/release/4.2/README.md">release/4.2/README.md</a></td>
<td style="width: 32.3664%;"><a href="https://www.npmjs.com/package/react-native-render-html#"><img src="https://camo.githubusercontent.com/7dc5a29e35774c807232368fc2adcb280f21aa8cb0774edb06ed1fe03a50a13b/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f72656163742d6e61746976652d72656e6465722d68746d6c2f72656c656173652f342e32" alt="npm" data-canonical-src="https://img.shields.io/npm/v/react-native-render-html/release/4.2"></a></td>
</tr>
</tbody>
</table>
<p style="text-align: center;">&nbsp;</p>
  `;
  const products = [
    {
      _id: "6527b593f79b5deac5ad6c83",
      user_login: "SUNWARD PHILIPPINES",
      user_email: "sales.sunwardphilippines@gmail.com",
      date_registered: "2/14/2022 9:00",
      first_name: "SUNWARD",
      last_name: "PHILIPPINES",
      billing_company: "",
      phone: "",
      address_1: "",
      address_2: "",
      city: "",
      shipping_address_1: "",
      shipping_address_2: "",
      shipping_city: "",
      attributes: [],
      info: info,
      createdAt: "2023-10-20T03:29:11.190Z",
      updatedAt: "2023-10-20T03:29:11.190Z",
    },
    {
      _id: "65153f9672c86c16be0afc34",
      user_login: "8MGM TRADING INC",
      user_email: "mjsalvado@8mgmtrading.com.ph",
      date_registered: "12/6/2021  3:23:41 AM",
      first_name: "8MGM TRADING INC",
      last_name: "8MGM",
      billing_company: "Taguig",
      phone: "09102903101",
      address_1: "PMI Tower",
      address_2: "PMI Tower",
      city: "Taguig",
      shipping_address_1: "PMI Tower",
      shipping_address_2: "PMI Tower",
      shipping_city: "Taguig",
      file_path_image:
        "storage/vendor_uploads/1695891350180-toyota-corolla-altis-hybrid-review-road-test-front-quarter-exterior-philippines-5de4a59f318b3.jpg",
      __v: 0,
      attributes: [],
      createdAt: "2023-10-20T05:44:50.216Z",
      updatedAt: "2023-10-20T05:44:50.216Z",
    },
  ];
  const [prod, setprod] = useState([]);

  useEffect(() => {
    setprod(vendors.splice(1, 20));
  }, []);
  useEffect(() => {
    setprod(vendors.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 <= vendors.length) {
      // setprod(product.splice(1, item));

      setprod([...prod, ...vendors.slice(item, item + 10)]);
      // setitem(item + 10);
    }
    // }
  }, [item]);
  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={1}
          showsVerticalScrollIndicator={false}
          renderItem={({ item }) => (
            <ShopCard key={item.id} product={item} prod={product} />
          )}
          containerStyle={styles.container1}
          contentContainerStyle={styles.content}
          onEndReachedThreshold={0.1}
        />
      </View>
    </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,
  },
  list: {
    width: "100%",
  },
  content: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    textTransform: "uppercase",
    marginLeft: 10,
    marginTop: 15,
  },
  img: {
    width: 400,
    height: 200,
    resizeMode: "cover",
    margin: "auto",
    borderRadius: 10,
    // backgroundColor: "#ffaa00",
  },
});
// export default ShopList;
export default memo(ShopList);
