import { FlatList, ScrollView, StyleSheet, Text, TouchableHighlight } from "react-native";
import { ProductTile } from "./ProductTile";
import { Id, Product } from "@/lib/product";
import { Key, useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { selectProducts } from "@/features/product/productSlice";
import { useAppSelector } from "@/app/store";

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

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

  const [activeProduct, setActiveProduct] = useState(null as null | Product);
  const products = useAppSelector(selectProducts).filter(p => (!!p.dimensions));

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

  return (
    <ScrollView scrollToOverflowEnabled={true}>
      {products.map(product => {
        return (
          <ProductTile
            product={product}
            onProductSelected={doOnProductSelected}
            isActive={activeProduct === product}
            key={product.id}
          />
        );
      })}
    </ScrollView>
  )
}

const styles = StyleSheet.create({

  productSelectorFlatList: {
    padding: 10,
    margin: 10,
  },

})