/**
 * 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 } from 'native-base';
import Headercontent from '../../../components/redux/header';
import cardData from '../../../Database/data';
import Checkoutcards from '../../../components/redux/checkoutCards';
import styles from './CheckoutStyles'
import PaymentDetailsForm, { PaymentMethodForm } from '../../../components/redux/paymentsDetails';
import DeliveryAddresses from '../../../components/redux/address';

interface CheckoutViewProps {
    selectedIndex: number;
    buttonState: boolean;
    selecteAddressdIndex: number;
    paymentMethods: Array<any>;
    changeButtonState: () => void;
    checkoutComplete: () => void;
    goBack: () => void;
    addPaymentMethod: (card:PaymentMethodForm) => void;
    gotoSelectRadio: (index:number) => void;
    gotoSelectAddressRadio: (index:number) => void;
}

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

                    <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
                            onSave={addPaymentMethod}
                        />
                    }
                    <ListItem
                        itemHeader
                        first
                        style={styles.headerText}
                    >
                        <Text style={styles.bold}>Delivery Address</Text>
                    </ListItem>
                    <DeliveryAddresses
                        deliveryJson={cardData.addresses}
                        selecteAddressdIndex={selecteAddressdIndex}
                        gotoSelectAddressRadio={(i: any) => props.gotoSelectAddressRadio(i)}
                    />

                </List>
            </Content>
            <Footer style={styles.footerStyle}>
                <Button danger style={styles.buttonBuynow} onPress={checkoutComplete} disabled={selectedIndex < 0 || selecteAddressdIndex < 0} >
                    <Text style={styles.buttonCartText}>Pay</Text>
                </Button>
            </Footer>
        </Container>
    )
}

export default CheckoutView;
