/**
 * 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,
    Card,
    View,
    Item,
    Left,
    Right,
    List,
    ListItem,
    Thumbnail,
    Body,
    Button,
    Footer,
    FooterTab,
    Grid,
    Row,
} from 'native-base';
import Headercontent from '../../../components/redux/header';
import styles from './MyCartStyles';
import AddToCartButton from '../../../components/redux/addToCartButton';

interface MycartViewProps{
    actualPrice: number;
    deliveryCharge: number;
    cartItems: Array<any>;
    goBack: () => void;
    goForDeliver: () => void;
}

const MycartView = (props:MycartViewProps) => {
    const {
        actualPrice,
        goForDeliver,
        deliveryCharge,
        cartItems,
        goBack
    } = props;
    const addressLocation = 'My Cart';

    const name = 'bars';
    const type = 'FontAwesome';

    return (<Container>
            <Headercontent
                name={'arrow-left'}
                onPress={goBack}
                loginTitle={addressLocation}
                type={type}
            />
            {cartItems.length > 0 ? (<Content>
                <View padder>
                    <Card style={styles.cardView}>
                        <View padder>
                            <Item style={styles.itemWithBottomborder}>
                                <Left>
                                    <View>
                                        <Text style={styles.amountTextSpec}>Sub Total</Text>
                                        <Text style={styles.amountTextSpec}>Dilevery Charge</Text>
                                    </View>
                                </Left>

                                <Right>
                                    <Text style={styles.amountTextRate}>₹ {actualPrice}</Text>
                                    <Text style={styles.amountTextRate}> ₹ {deliveryCharge} </Text>
                                </Right>
                            </Item>
                        </View>
                        <View padder>
                            <Item style={styles.itemWithNoBottomborder}>
                                <Left>
                                    <View>
                                        <Text>Your Saving</Text>
                                    </View>
                                </Left>
                                <Right>
                                    <Text style={styles.textBold}>₹ {actualPrice + deliveryCharge }</Text>
                                </Right>
                            </Item>
                        </View>

                    </Card>
                </View>
                <View>
                    <List style={styles.listStyle}>
                        {cartItems.map((el:any, index:number) => (<ListItem thumbnail>
                            <Left>
                                <Thumbnail square source={ el.image} style={styles.imageView} />
                            </Left>
                            <Body>
                                <View style={styles.offerView} >
                                    <Text style={styles.offerViewText}>{el.off}</Text>
                                </View>
                                <View style={{ width: 200 }}>
                                    <Text style={styles.nameDescriptionviewText}>
                                        {el.name}
                                    </Text>
                                </View>

                                <Text
                                    numberOfLines={1}
                                    style={styles.nameDescriptionviewText1}
                                >
                                    {el.desc}
                                </Text>
                                <Text note >{el.salePrice}</Text>
                            </Body>
                            <Right style={styles.selfEndItem}>
                                <AddToCartButton
                                 productId={el.id}
                                 productQty={el.units}
                                 product={el} />
                            </Right>
                        </ListItem>))}
                    </List>
                </View>
            </Content>) : (<Content contentContainerStyle={styles.emptyContainer}>
                    <View >
                        <Text>there is no item in your cart.</Text>
                        <Button block danger onPress={goBack}>
                            <Text>Continue Shopping</Text>
                        </Button>
                    </View>
                </Content>)
        }

            {cartItems.length > 0 && <Footer>
                <FooterTab style={styles.footerContent}>
                    <Button full style={styles.buttonCart} onPress={goForDeliver}>
                        <Text style={styles.buttonCartText}>Checkout</Text>
                    </Button>
                    <Button full style={styles.buttonBuynow} onPress={goForDeliver}>
                        <Text style={styles.buttonCartText}> ₹{actualPrice + deliveryCharge } </Text>
                    </Button>
                </FooterTab>
            </Footer>}
        </Container>)
    
}
export default MycartView;
