import React, { useEffect, useState } from "react";
import { Dimensions, StyleSheet, Text, View } from "react-native";
import MasonryList from "@react-native-seoul/masonry-list";
import CartCard from "../../components/cart/CartCard";
const width = Dimensions.get("window").width;

const cartList1 = [
  {
    img: "https://dynamic.zacdn.com/UwpOxCDuIyVkaiTKDr--O58nQig=/filters:quality(70):format(webp)/https://static-ph.zacdn.com/p/playboy-bunny-3082-3012861-1.jpg",
    min: 20,
    name: "Highly Fragrant Jasmine Green Tea No. 3 500g",
    per: "pieces",
    price: 200,
    promo: 30,
    rate: 4.2,
    raterTotal: 200,
    shopId: "1234",
    sold: 340,
  },
  {
    img: "https://i.ebayimg.com/images/g/ihcAAOSwYYpjFfYl/s-l400.jpg",
    min: 20,
    name: "product 1",
    per: "pieces",
    price: 200,
    shopId: "1233",
    sold: 340,
  },
  {
    img: "https://lzd-img-global.slatic.net/g/p/e0cae61475925b413e5d63d665d88b6f.jpg_720x720q80.jpg",
    min: 20,
    name: "product 1",
    per: "pieces",
    price: 200,
    shopId: "1234",
    sold: 340,
  },
];

const Cart = ({ cartList }) => {
  const [cartSort, setcartSort] = useState([]);
  console.log(cartSort);

  useEffect(() => {
    const cartSorted = cartList.reduce((acc, item) => {
      const shopId = item.shopId;
      const existingShop = acc.find((shop) => shop.shopname === shopId);

      if (existingShop) {
        // Shop already exists, add the item to its cartItems array
        existingShop.cartItems.push(item);
      } else {
        // Shop doesn't exist, create a new shop object
        acc.push({ shopname: shopId, cartItems: [item] });
      }

      return acc;
    }, []);
    setcartSort(cartSorted);
  }, []);

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>CART</Text>
      </View>
      <View style={styles.wrapper}>
        <MasonryList
          data={cartSort}
          keyExtractor={(item) => item.id}
          style={styles.list}
          numColumns={1}
          showsVerticalScrollIndicator={false}
          renderItem={({ item }) => <CartCard cart={item} />}
          containerStyle={styles.container1}
          contentContainerStyle={styles.content}
          onEndReachedThreshold={0.1}
        />
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#ffffff",
    padding: 10,
    height: "100%",
    width: width,
  },
  header: {
    width: "100%",
    top: 0,
    height: 50,
    marginLeft:15
  },
  container1: {
    width: "100%",
  },
  content: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  list: {
    width: "100%",
  },
  headerText: {
    textAlign: "left",
    width: "100%",
    fontWeight: "600",
    fontSize: 16,
  },
  footer: {
    bottom: 0,
    width: "100%",
  },
  wrapper: {
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  list: {
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  card: {
    width: "100%",
    borderWidth: 1,
    borderColor: "#dddd",
    justifyContent: "center",
    padding: 15,
    paddingVertical: 10,
    borderRadius: 10,
    marginVertical: 2,
  },
  title: {
    fontSize: 16,
    fontWeight: "600",
  },
  body: {
    fontSize: 16,
    // fontWeight: "600",
    marginTop: 5,
  },
  date: {
    fontSize: 12,
    // fontWeight: "600",
    color: "#797979",
    marginTop: 10,
  },
});
export default Cart;