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>
            <View style={styles.productAttributeRow}>
                <Text style={styles.key}>{key}</Text>
                <TextInput
                    value={newValue}
                    onChangeText={doChange}
                    style={styles.value}
                    aria-label="Edit Value" />
                <TouchableHighlight
                    onPress={() => onDelete && onDelete(product.id, key, value)}
                    aria-label="Delete Attribute"
                    style={{ backgroundColor: "darkred", borderRadius: 5, margin: 5, padding: 5, }}>
                    <Ionicons name="trash-bin-outline" size={30} color={"white"} />
                </TouchableHighlight>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    productAttributeRow: {
        flexDirection: "row",
    },
    key: {
        flex: 1,
    },
    value: {
        flex: 1,
        borderWidth: 1,
        borderColor: "grey",
        borderStyle: "solid",
        padding: 10
    }
});