import React, {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";
import {BaseMarketplace, Order} from "../../types/order";
import OrderProductsList from "./OrderProductsList";
import {useDispatch} from "react-redux";
import {setOrder} from "../../features/assembly/assemblySlice";
import {OrderStatus, OrderStatusDictionary} from "../../features/ordersFilter/ordersFilterSlice";

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

}


const BaseMarketplaceIconDict = {
    [BaseMarketplace.Wildberries]: require('assets/icons/marketplaces/wildberries.png'),
    [BaseMarketplace.Ozon]: require('assets/icons/marketplaces/ozon.png'),
    [BaseMarketplace.YandexMarket]: require('assets/icons/marketplaces/yandex_market.png'),
};
const OrderCard: FC<Props> = ({onPress, onSelect, order}) => {

    return (
        <TouchableOpacity onPress={() => {
            if (onSelect) onSelect(order);

        }}>
            <View style={styles.container}><View style={styles.description}>
                <View style={styles.descriptionContent}>
                    <View style={styles.title}>

                        <DTitle>{order.orderNumber}</DTitle>
                        <Image source={BaseMarketplaceIconDict[order.baseMarketplace]} style={styles.titleImage}/>
                    </View>
                    <DText>Селлер: {order.sellerName}</DText>
                    <DText>Маркетплейс: {order.marketplaceName}</DText>
                    <DText>Товаров в заказе: {order.products.length}</DText>
                    <DText>Создан: {order.createdOn}</DText>
                    <DText>Отгрузка: {order.shipmentDate}</DText>
                    <DText>Склад отгрузки: {order.shippingWarehouse}</DText>
                    <DText>Город: {order.city}</DText>

                </View>
                <View style={styles.descriptionStatus}>
                    <DText style={order.status >= OrderStatus.CANCELLED && {color: "red"}}>
                        {OrderStatusDictionary[order.status as OrderStatus]}
                    </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(30),
    },
    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: {
        flex: 1
    },
    descriptionStatus: {
        alignSelf: "flex-end",
        // backgroundColor: "blue",
        marginRight: responsiveWidth(2),
    }
});
export default OrderCard;