import { useAppDispatch, useAppSelector } from "@/app/store"
import { addAttribute, changeKey, deleteAttribute, deleteProduct, selectProductIds, selectProducts, updateAttribute, updateDimensions, updatePrice, updateProduct } from "@/features/product/productSlice"
import { Id, Product } from "@/lib/product";
import { FlatList, SafeAreaView, StyleSheet, Text } from "react-native";
import { ProductEditorItem } from "./ProductEditorItem";
import { dimensions_t } from "@/lib/dimensions";

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

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

    function onAttributeDelete(product_id: string, attribute: string) {
        dispatch(deleteAttribute({product_id: product_id, attribute}));
    }

    function onAttributeUpdated(product_id: string, attribute: string, value: string) {
        dispatch(updateAttribute({product_id, attributeKey: attribute, attributeValue: value}));
    }

    function onAttributeAdded(product_id: Id) {
        console.log("Adding attribute to %s", product_id);
        dispatch(addAttribute(product_id));
    }

    function onPriceUpdated(product_id: string, pricePerUnit: number) {
        dispatch(updatePrice({product_id, pricePerUnit}));
    }

    function onAttributeKeyChanged(product_id : string, oldKey : string, newKey : string) {
        dispatch(changeKey({product_id, oldKey, newKey}))
    }

    function onDimensionUpdated(product_id: string, dimensions: dimensions_t) {
        dispatch(updateDimensions({product_id, dimensions}));
    }

    return (
        <SafeAreaView style={{overflow: "scroll"}}>
            <Text>Edit Products</Text>
            <FlatList
            data={products}
            keyExtractor={(p, i) => `product-${p.id}`}
            renderItem={
                ({item}) => {

                    return (
                        <ProductEditorItem
                        product={item}
                        onProductDeleted={onProductDeleted}
                        onAttributeDeleted={onAttributeDelete}
                        onAttributeKeyChanged={onAttributeKeyChanged}
                        onAttributeUpdated={onAttributeUpdated}
                        onAttributeAdded={onAttributeAdded}
                        onPriceUpdated={onPriceUpdated}
                        onDimensionsUpdated={onDimensionUpdated}
                        />
                    )
                }
            }
            />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    h1: {
        textAlign: "center",
        fontFamily: "sans-serif"
    },
    product: {
        
    }
})