import { useAppDispatch, useAppSelector } from "@/app/store"
import { deleteProduct, selectProducts, updateProduct } from "@/features/product/productSlice"
import { Product } from "@/lib/product";
import { FlatListComponent, StyleSheet, Text } from "react-native";
import { FlatList } from "react-native-reanimated/lib/typescript/Animated";
import { SafeAreaView } from "react-native-safe-area-context";
import { ProductEditorItem } from "./ProductEditorItem";
import React from "react";

export const ProductEditor = () => {
    const products = useAppSelector(selectProducts) as Product [];

    const dispatch = useAppDispatch();
    
    function onProductDeleted(product_id: string) {
        dispatch(deleteProduct(product_id));
    }

    function onProductUpdated(product_id: string, product: Product) {
        dispatch(updateProduct(product));
    }


    return (
        <SafeAreaView>
            <FlatList
            data={products}
            renderItem={
                ({item}) => {
                    return (
                        <ProductEditorItem
                        product={item}
                        onProductDeleted={onProductDeleted}
                        onProductUpdated={onProductUpdated}
                        />
                    )
                }
            }
            />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    product: {
        
    }
})