import { FlatList, StyleSheet, Text, TouchableHighlight } from "react-native";
import { ProductTile } from "./ProductTile";
import { Product } from "@/lib/product";
import { useState } from "react";
import { useSelector } from "react-redux";
import { selectProducts } from "@/features/product/productSlice";

export type ProductSelectionProps = {
    onProductSelected?: (product : Product) => any;
}

export default function ProductList ({onProductSelected} : ProductSelectionProps) {

    const products = useSelector(selectProducts);

    const [activeProduct, setActiveProduct] = useState(null as null | Product);

    function doOnProductSelected(product : Product) {
        setActiveProduct(product);
        onProductSelected && onProductSelected(product);
    }

    return (
      <FlatList
      data={products}
      style={styles.productSelectorFlatList}
      renderItem={({ item }) => {
        return (
            <ProductTile
                product={item}
                onProductSelected={doOnProductSelected}
                isActive={activeProduct === item}
                />
        );
      } } />

    )
}

const styles = StyleSheet.create({
  
    productSelectorFlatList: {
      padding: 10,
      margin: 10,
    },
  
})