
/**
 * 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, List, ListItem, Button, View, Footer, FooterTab } from 'native-base';

import Headercontent from '../../../components/grocery/header';
import cardData from '../../../Database/grocery/data';
import Checkoutcards from '../../../components/grocery/checkoutCards';
import styles from './CheckoutStyles'
import PaymentDetailsForm from '../../../components/grocery/paymentsDetails';
import DeliveryAddresses from '../../../components/grocery/address';

interface CheckoutViewProps {
    goBack: () => void;
    gotoSelectRadio: (index:number) => void;
    gotoSelectAddressRadio: (index:number) => void;
    onValueChange: (index:any) => void;
    checkoutComplete: () => void;
    selectedIndex: number;
    buttonState: boolean;
    changeButtonState: ()=> void;
    selectedValue: any;
    selecteAddressdIndex: any;
}

const CheckoutView = (props: CheckoutViewProps) => {
    const {
        goBack,
        selectedIndex,
        buttonState,
        changeButtonState,
        selectedValue,
        selecteAddressdIndex,
    } = props
    const loginTitle = 'Payment'
    const arrowLeft = 'arrow-left'
    const iconType = 'FontAwesome'
    return (
        <Container>
            <Headercontent
                name={arrowLeft}
                onPress={goBack}
                loginTitle={loginTitle}
                type={iconType}
            />
            <Content>
                <List>
                    <ListItem itemHeader first style={styles.paymentMethod}>
                        <Text style={styles.boldFont}>Select payment method</Text>
                    </ListItem>
                    <Checkoutcards
                        selectedIndex={selectedIndex}
                        cardDataJson={cardData.billingCards}
                        gotoSelectRadio={(i) => props.gotoSelectRadio(i)}
                    />

                    <View style={styles.marginTopItem}>
                        {buttonState ? <Button full style={styles.buttonHeight} light onPress={changeButtonState}>
                            <Text style={styles.buttonText}> Cancel</Text>
                        </Button>
                            : <Button full style={styles.buttonHeight} light onPress={changeButtonState}>
                                <Text style={styles.buttonText}> Add new payment method </Text>
                            </Button>
                        }
                    </View>
                    {buttonState &&
                        <PaymentDetailsForm
                            onValueChange={($value) => props.onValueChange($value)}
                            cardDetails={styles.cardDetails}
                            jsonList={cardData.pickerCard}
                            selectedValue={selectedValue}
                            buttonSize={styles.buttonSize}
                            buttonTextColor={styles.buttonTextColor}
                        />
                    }
                    <ListItem
                        itemHeader
                        first
                        style={styles.headerText}
                    >
                        <Text style={styles.bold}>Delivery Address</Text>
                    </ListItem>
                    <DeliveryAddresses
                        deliveryJson={cardData.addresses}
                        selecteAddressdIndex={selecteAddressdIndex}
                        gotoSelectAddressRadio={(i) => props.gotoSelectAddressRadio(i)}
                    />

                </List>
            </Content>
            <Footer>
                <FooterTab style={styles.footerStyle}>
                    <Button full style={styles.buttonBuynow} onPress={() => props.checkoutComplete()}>
                        <Text style={styles.buttonCartText}>Pay</Text>
                    </Button>
                </FooterTab>

            </Footer>
        </Container>
    )
}

export default CheckoutView;
