import { ScrollView, StyleSheet } from "react-native";
import { ProductTile } from "./ProductTile";
import { Product } from "@/lib/product";
import { useState } from "react";
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).filter((p) => {
    console.dir(p);
    return !!p.dimensions;
  });

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

  return (
    <ScrollView scrollToOverflowEnabled={true} aria-label="product list">
      {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,
  },
});