/**
 * 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 { withNavigation } from 'react-navigation';
import { View, TouchableWithoutFeedback } from 'react-native';

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

import Headercontent from '../../../components/grocery/header';
import styles from './productListStyle';
import AddRemoveCounterComponent from '../../../components/grocery/cartAddRemoveItems';

interface ProductListViewProps {
    productDetails: any;
    title: string;
    goForProductdetails: (item:any) => void;
    goToMyCart: () => void;
    subtractCount: () => void;
    remove: string;
    text: number;
    addCount: () => void;
    goBack: () => void;
    gotoAdd: (count:any) => void;
    add: string;
}

const ProductListView = (props: ProductListViewProps) => {
    const { productDetails, title, goForProductdetails, goToMyCart, subtractCount, remove, text, addCount, add } = props
    return (
        <Container>
            <Headercontent
                name={'arrow-left'}
                onPress={() => props.goBack()}
                loginTitle={title}
                type={'FontAwesome'}
                rightIcon={'shopping-cart'}
                rightType={'FontAwesome'}
                stylesRight={styles.rightIcon}
                onPressToCart={goToMyCart}
            />
            <Content>
                <View>
                    {
                        productDetails.propItems.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}>
                                                {text < 1 ?
                                                    <Button style={styles.buttonStyle} onPress={() => props.gotoAdd(productItems.units)}>
                                                        <Text>Add</Text>
                                                    </Button> :
                                                    <AddRemoveCounterComponent
                                                        subtractCount={subtractCount}
                                                        remove={remove}
                                                        text={text}
                                                        addCount={addCount}
                                                        add={add}
                                                    />
                                                }

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