import { Product } from "@/lib/product"
import { useState } from "react"
import { FlatList, StyleSheet, Text, TouchableHighlight, View } from "react-native"
import {ProductAttributeEditor} from "./ProductAttributeEditor";
import React from "react";

export type ProductUpdatedFunc = (product_id: string, product: Product) => any;
export type ProductDeletedFunc = (product_id: string) => any;

export type ProductEditorItemProps = {
    product: Product,
    onProductUpdated?: ProductUpdatedFunc,
    onProductDeleted?: ProductDeletedFunc,
}

export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted }: ProductEditorItemProps) => {

    const [showAttributes, setShowAttributes] = useState(false);

    function onAttributeChanged(product_id: string, key: string, newValue: string) {
        product.attributes[key] = newValue;
        onProductUpdated && onProductUpdated(product_id, product);

    }

    function onAttributeDelete(product_id: string, key: string) {
        product.removeAttribute(key);
        onProductDeleted && onProductDeleted(product_id);
    }

    return (
        <View>
            <TouchableHighlight
                onPress={() => setShowAttributes(!showAttributes)}
                aria-label="Product Item"
            >
                <Text style={styles.product}>{product.attributes.name || `Product ${product.id}`} </Text>
            </TouchableHighlight>
            {showAttributes &&
                (
                    <FlatList
                        data={product.attributesAsList}
                        renderItem={({ item }) => (
                            <ProductAttributeEditor
                                product={product}
                                attributeKey={item.key || "some key"}
                                attributeValue={item.value}
                                onChange={onAttributeChanged}
                                onDelete={onAttributeDelete}
                            />
                        )}
                        keyExtractor={(item) => `${product.id}-${item.key}`}
                    />
                )
            }
        </View>
    )
}

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