import { Product } from "@/lib/product";
import Ionicons from "@expo/vector-icons/Ionicons";
import React from "react";
import { ChangeEvent, SetStateAction, useState } from "react";
import { NativeSyntheticEvent, StyleSheet, Text, TextInput, TextInputChangeEventData, TextInputProps, 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, key: string, value: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, };

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

    const doChange = (e : any) => {
        setNewValue(e.target.value);
    }

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

const style = StyleSheet.create({

});