import { Product } from "@/lib/product";
import Ionicons from "@expo/vector-icons/Ionicons";
import React from "react";
import { useState } from "react";
import { StyleSheet, Text, TextInput, TouchableHighlight, View } from "react-native";

export type ProductAttributeChangeFunc = (product_id: string, key: string, newValue: string) => any;
export type ProductAttributeDeleteFunc = (product_id: string, key: string) => any;

export type ProductAttributeProps = { product: Product, attributeKey: string, attributeValue: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, };

export const ProductAttributeEditor = ({ product, attributeKey: key, attributeValue: value, onDelete, onChange } : ProductAttributeProps) => {
    const [doEdit, setDoEdit] = useState(true);
    const [newValue, setNewValue] = useState(value);

    const doChange = (e: any) => {
        setNewValue(e);
        onChange && onChange(product.id, key, e);
    }

    return (
        <View>
            <Text>{key}</Text>
            <View>
                <TouchableHighlight
                    onPress={() => setDoEdit(!doEdit)}
                    aria-label="Property Value"
                >
                    {doEdit ?
                        (<Text>{newValue}</Text>) :
                        (<TextInput
                            value={newValue}
                            onChangeText={doChange}
                            aria-label="Edit Value" />)
                    }
                </TouchableHighlight>
                <TouchableHighlight
                    onPress={() => onDelete && onDelete(product.id, key, value)}
                    aria-label="Delete Attribute">
                    <Ionicons name="trash-bin-outline" />
                </TouchableHighlight>
            </View>
        </View>
    )
}

const style = StyleSheet.create({

});