import React, {FC} from "react";
import {SupplierProduct} from "../../../types/supplierProduct";
import {Image, StyleSheet, TouchableOpacity, View} from "react-native";
import DTitle from "../../DTitle/DTitle";
import DText from "../../DText/DText";
import {RFPercentage} from "react-native-responsive-fontsize";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {Product} from "../../../types/product";

type Props = {
    product: Product;
    onPress: (product: Product) => void;
}
const SelectProductElement: FC<Props> = React.memo(({product, onPress}) => {
    return (
        <TouchableOpacity onPress={() => {
            onPress(product)
        }}>
            <View style={styles.container}>
                <View style={styles.imageWrapper}>
                    <Image style={styles.image} source={{uri: product.thumbUrl}}/>
                </View>
                <View style={styles.description}>
                    <View style={styles.descriptionContent}>

                        <DText>{product.productName}</DText>
                        <DText style={{textAlign: "justify"}}>{}</DText>
                        <DText>Артикул DENCO: {product.dencoArticle}</DText>
                    </View>


                </View>

            </View>
        </TouchableOpacity>

    )
})

const styles = StyleSheet.create({
    container: {
        backgroundColor: "white",
        display: "flex",
        borderRadius: RFPercentage(3),
        flexDirection: "row",
        padding: RFPercentage(2),
        flex: 1,
    },
    imageWrapper: {
        width: responsiveWidth(20),
    },
    image: {
        width: "100%",
        height: "100%",

    },
    description: {
        // backgroundColor: "red",
        flex: 1,
        display: "flex",
        flexDirection: "column",
        paddingLeft: responsiveWidth(3),
        gap: 0,

    },
    title: {
        marginBottom: responsiveHeight(0.5),
        flexDirection: "row",
        alignItems: "center"
    },
    titleImage: {
        width: responsiveWidth(4),
        height: responsiveHeight(4),
        resizeMode: "center",
        marginLeft: responsiveHeight(1)
    },
    descriptionContent: {
        // backgroundColor: "green",
        flex: 1,
    },
    descriptionStatus: {
        alignSelf: "flex-end",
        // backgroundColor: "blue",
        marginRight: responsiveWidth(2),
    }
});
export default SelectProductElement;