/**
 * 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,
} from 'native-base';
import Headercontent from '../../../components/grocery/header';
import styles from './MyCartStyles';
import AddRemoveCounterComponent from '../../../components/grocery/cartAddRemoveItems';

interface MycartViewProps {
    toggleDrawer: ()=> void;
    text: any;
    addCount: (index:any) => void;
    subtractCount: (index:number, counts: number) => void ;
    remove: any;
    add: any;
    actualPrice: any;
    goForDeliver: () => void;
    total: any;
    saving: any;
    cartItems: Array<any>;
}

const MycartView = (props: MycartViewProps) => {
    const {
        toggleDrawer,
        text,
        addCount,
        subtractCount,
        remove,
        add,
        actualPrice,
        goForDeliver,
        total,
        saving
    } = props
    console.log(props, typeof (text))
    const addressLocation = 'My Cart';

    const name = 'bars';
    const type = 'FontAwesome';
    // const saving = 125
    return (
        <Container>
            <Headercontent
                name={name}
                onPress={toggleDrawer}
                loginTitle={addressLocation}
                type={type}
            />
            <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}>Delivery Charge</Text>
                                    </View>
                                </Left>

                                <Right>
                                    <Text style={styles.amountTextRate}>$ {actualPrice}</Text>
                                    <Text style={styles.amountTextRate}> $ 49 </Text>
                                </Right>
                            </Item>
                        </View>
                        <View padder>
                            <Item style={styles.itemWithNoBottomborder}>
                                <Left>
                                    <View>
                                        <Text>Your Saving</Text>
                                    </View>
                                </Left>
                                <Right>
                                    <Text style={styles.textBold}>$ {saving}</Text>
                                </Right>
                            </Item>
                        </View>

                    </Card>
                </View>
                <View>
                    <List style={styles.listStyle}>
                        {props.cartItems.map((el, index) => (<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}>
                                <AddRemoveCounterComponent
                                    subtractCount={() => subtractCount(index, el.units)}
                                    remove={remove}
                                    text={el.units}
                                    addCount={() => addCount(index)}
                                    add={add}
                                />
                            </Right>
                        </ListItem>))}
                    </List>
                </View>
            </Content>

            <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}> ${total} </Text>
                    </Button>
                </FooterTab>
            </Footer>
        </Container>
    )
}
export default MycartView;
