import {FC} from "react";
import {FlatList, StyleSheet, View, Image, TouchableOpacity} from "react-native";
import {OrderProduct} from "../../types/order";
import DTitle from "../DTitle/DTitle";
import DText from "../DText/DText";
import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {RFPercentage} from "react-native-responsive-fontsize";
import {background} from "../../css/colors";

type ListProps = {
    products: OrderProduct[];
    onSelected: (product: number) => void;
}
type CardProps = {
    product: OrderProduct;
    onPress: (product: number) => void;
    id: number;
}
const OrderProductCard: FC<CardProps> = ({product, onPress, id}) => {
    return (
        <TouchableOpacity onPress={() => onPress(id)}>
            <View style={cardStyles.container}>
                <View style={cardStyles.content}>
                    <DText>{id + 1}) {product.productName}</DText>
                </View>
            </View>
        </TouchableOpacity>

    )
}
const cardStyles = StyleSheet.create({
    container: {
        flexDirection: "row",
        backgroundColor: background,
        borderRadius: RFPercentage(1),
        padding: RFPercentage(1)
    },
    content:{

    }
})
const OrderProductsList: FC<ListProps> = ({products, onSelected}) => {
    return (

        <View style={listStyles.container}>
            <DTitle style={listStyles.title}>Товары</DTitle>
            <FlatList data={products}
                      contentContainerStyle={{rowGap: responsiveHeight(1)}}
                      renderItem={(item) => <OrderProductCard id={item.index} product={item.item}
                                                              onPress={onSelected}/>}/>
        </View>

    )
}


const listStyles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        flex: 1
    },
    title: {
        marginBottom: responsiveHeight(2),
        textAlign: "center"
    }
})

export default OrderProductsList;