import { Product } from "@/lib/product"
import { ImageBackground, StyleProp, StyleSheet, Text, ViewStyle } from "react-native";
import { AnimatedStyle } from "react-native-reanimated";
import { View } from "react-native-reanimated/lib/typescript/Animated";

export type OnProductSelectedFunc = (product : Product) => any;

type MyStyle = StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;

export type ProductTileProps = {
    product: (Product),
    onProductSelected?: OnProductSelectedFunc,
    style?: {
        tile?: MyStyle,
        image?: MyStyle,
    }
}

const FALLBACK_IMAGE = "";

export function ProductTile ({product, onProductSelected, style} : ProductTileProps) {
    const src = product.attributes.image || FALLBACK_IMAGE;
    return (
        <View style={style?.tile}>
            <ImageBackground
                src={src}
                resizeMode="cover"
                style={styles.image}
            >
                <Text style={styles.text}>{product.attributes.name || `Product ${product.id}`}</Text>
                <Text style={styles.text}>{ product.pricePerUnit.toString() } / {product.measurement.value} {product.measurement.unit.symbol} </Text>
            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    image: {

    },
    text: {

    },
})