import {FC, useState} from "react";
import {GestureResponderEvent, Image, StyleSheet, TouchableOpacity, View} from "react-native";
import {RFPercentage} from "react-native-responsive-fontsize";
import DText from "../DText/DText";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import DTitle from "../DTitle/DTitle";

type Props = {
    onPress?: (event: GestureResponderEvent) => void

}
const OrderCard: FC<Props> = ({onPress}) => {

    const [order, setOrder] = useState({
        article: 183658,
        imageUrl: "https://421421.selcdn.ru/denco/996956/thumbzoom/h0b41036e5dc84a88b3dd344a46ab33edt.jpg-640x640.jpg",
        orderNumber: "93757290-0104-7",
        productName: "Фигурки животных «Собачки» 258, 5-7 см., статичные / 12 шт.",
        supplierName: "simaland",
        marketplaceName: "Wildberries РЕНТА",
        sellerName: "DENCO",
        assembled: false
    });

    return (
        <TouchableOpacity onPress={() => {
            console.log("pressed11")
        }}>
            <View style={styles.container}>
                <View style={styles.imageWrapper}>
                    <Image style={styles.image} source={{uri: order.imageUrl}}/>
                </View>
                <View style={styles.description}>
                    <View style={styles.title}>

                        <DTitle>{order.orderNumber}</DTitle>
                        <Image source={require('assets/icons/marketplaces/ozon.png')} style={styles.titleImage}/>
                    </View>

                    <DText>Количество: 5</DText>
                    <DText>Поставщик: {order.supplierName}</DText>
                    <DText>Селлер: {order.sellerName}</DText>
                    <DText>Цвет: ГОЛУБОЙ</DText>
                    <View style={styles.statusContainer}>
                        <DText>
                            Ожидает сборки
                        </DText>
                    </View>
                </View>

            </View>
        </TouchableOpacity>

    )
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: "white",
        display: "flex",
        borderRadius: RFPercentage(5),
        height: responsiveHeight(20),
        flexDirection: "row",
        padding: RFPercentage(2),


    },
    imageWrapper: {
        width: responsiveWidth(30),
    },
    image: {
        width: "100%",
        height: "100%",

    },
    description: {
        backgroundColor:"red",
        flex: 1,
        display: "flex",
        flexDirection: "column",
        paddingLeft: responsiveWidth(3),
        gap: 0,
    },
    title: {
        marginBottom: responsiveHeight(1),
        flexDirection: "row",
        alignItems: "center"
    },
    titleImage: {
        width: responsiveWidth(4),
        height: responsiveHeight(4),
        resizeMode: "center",
        marginLeft: responsiveHeight(1)
    },
    statusContainer: {
        alignSelf: "flex-end",
    }
});
export default OrderCard;