/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import React from 'react';
import { Container, Content, Text, ListItem, List, Thumbnail, Body, Right, Button, Left } from 'native-base';
import { View, TouchableWithoutFeedback } from 'react-native';

import Headercontent from '../../../components/redux/header';
import styles from './productListStyle';
import { withNavigation } from 'react-navigation';
import AddToCartButton from '../../../components/redux/addToCartButton';

interface ProductListViewProps {
    products: Array<any>;
    title: string;
    cartItemLength: number;
    goForProductdetails: (product:any) => void;
    goToMyCart: () => void;
    goBack: () => void;
}

const ProductListView = (props:ProductListViewProps) => {
    const { products, title, goForProductdetails, goToMyCart, goBack, cartItemLength } = props
    return (
        <Container>
            <Headercontent
                name={'arrow-left'}
                onPress={goBack}
                loginTitle={title}
                type={'FontAwesome'}
                rightIcon={'shopping-cart'}
                cartItemLength={cartItemLength}
                rightType={'FontAwesome'}
                stylesRight={styles.rightIcon}
                onPressToCart={goToMyCart}
            />
            <Content>
                <View>
                    {
                        products.map((productItems:any, i:number) => {
                            return (
                                <View key={i}>
                                    <List>
                                        <ListItem thumbnail>
                                            <TouchableWithoutFeedback onPress={() => goForProductdetails(productItems)}>
                                                <Left>
                                                    <Thumbnail square source={productItems.image} style={styles.imageView} />
                                                </Left>
                                            </TouchableWithoutFeedback>
                                            <TouchableWithoutFeedback onPress={() => goForProductdetails(productItems)}>
                                                <Body>
                                                    <View style={styles.offerView} >
                                                        <Text style={styles.offerViewText}>{productItems.offer}</Text>
                                                    </View>
                                                    <Text style={styles.nameDescriptionviewText}>
                                                        {productItems.name}
                                                    </Text>
                                                    <Text
                                                        numberOfLines={1}
                                                        style={styles.nameDescriptionviewText1}
                                                    >
                                                        {productItems.qty}
                                                    </Text>
                                                    <Text note numberOfLines={1}> ₹{productItems.price}</Text>
                                                </Body>
                                            </TouchableWithoutFeedback>
                                            {/* <Right style={styles.selfEndItem}>
                                            </Right> */}
                                        </ListItem>
                                        <AddToCartButton product={productItems} productId={productItems.id} productQty={productItems.units} />

                                    </List>
                                </View>
                            )
                        })
                    }
                </View>
            </Content>
        </Container>
    )
}
export default withNavigation(ProductListView);
