import React from "react";
import { View, Text, StyleSheet } from "react-native";
import CartSubCard from "./CartSubCard";
import MasonryList from "@react-native-seoul/masonry-list";
import Checkbox from "expo-checkbox";

const CartCard = ({ cart, shopLike, shopProdLike, index, quantityChange,q }) => {
  return (
    <View style={styles.container}>
      <View style={styles.heart}>
        <Checkbox
          value={cart?.selected}
          onValueChange={() => shopLike(index)}
        />
        <Text style={styles.header}>{cart?.shopname}</Text>
      </View>
      {/* {cart ? ( */}
      <MasonryList
        data={cart?.cartItems}
        keyExtractor={(item) => item.id}
        style={styles.list}
        numColumns={1}
        showsVerticalScrollIndicator={false}
        renderItem={({ item, i }) => (
          <CartSubCard
            shopProdLike={shopProdLike}
            shopIndex={index}
            index={i}
            cart={item ? item : []}
            quantityChange={quantityChange}
            q={q}
          />
        )}
        containerStyle={styles.container1}
        contentContainerStyle={styles.content}
        onEndReachedThreshold={0.1}
      />
      {/* ) : null} */}
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    margin: 5,
    borderRadius: 6,
    borderColor: "#dddd",
    borderWidth: 1,
    overflow: "hidden",
    padding: 10,
    backgroundColor: "#fafafa",
  },
  heart: {
    width: "100%",
    flexDirection: "row",
  },
  header: {
    // position: "fixed",
    fontWeight: "600",
    width: "100%",
    top: 0,
    marginLeft: 15,
  },
  footer: {
    // position: "absolute",
    bottom: 0,
    width: "100%",
  },
  wrapper: {
    height: "85%",
  },
});

export default CartCard;