/**
 * 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 { Form, Item, Input, Label, View, Text, Icon, Button } from 'native-base';

import MyAccountView from './MyAccountView';
import jsonData from '../../../Database/grocery/data';
import Checkoutcards from '../../../components/grocery/checkoutCards';
import PaymentDetailsForm from '../../../components/grocery/paymentsDetails';
import styles from './MyAccountStyles';
import DeliveryAddresses from '../../../components/grocery/address';
import { NavigationStackScreenProps } from 'react-navigation-stack';

interface Iprops extends NavigationStackScreenProps {

}
interface Istate {
    selectedValue: string;
    modalVisible: boolean;
    buttonState: boolean;
    selectedIndex: any;
    selecteAddressdIndex: any;
}

class MyAccountContainer extends React.Component<Iprops,Istate> {
    constructor(props:Iprops) {
        super(props)
        this.state = {
            selectedValue: 'Visa',
            modalVisible: false,
            buttonState: false,
            selecteAddressdIndex: null,
            selectedIndex: null
         }
    }

    onValueChange = (value: string) => {
        this.setState({
            selectedValue: value
        });
    }

    setModalInVisible = () => {
        this.setState({
            modalVisible: false
        })
    }
    toggleDrawer = () => {
        this.props.navigation.toggleDrawer()
    }

    goToMyCart = () => {
        this.props.navigation.navigate('GroceryMycart')
    }
    gotoSelectRadio(index:number) {
        const { selectedIndex } = this.state
        if (index === selectedIndex) {
            this.setState({
                selectedIndex: null
            })
        } else {
            this.setState({
                selectedIndex: index
            })
        }
    }
    gotoSelectAddressRadio(index:number) {
        const { selecteAddressdIndex } = this.state
        if (index === selecteAddressdIndex) {
            this.setState({
                selecteAddressdIndex: null
            })
        } else {
            this.setState({
                selecteAddressdIndex: index
            })
        }
    }

    openAddModal = () => {
        this.setState({
            modalVisible: true
        })
    }
    changeButtonState = () => {
        this.setState({
            buttonState: !this.state.buttonState
        })
    }
    render() {
        const { selectedIndex } = this.state
        const { selecteAddressdIndex } = this.state
        const iconType = 'ios-add-circle-outline'
        const profile = () => {
            return (
                <View>
                    <Form style={styles.marginTopView}>
                        {jsonData.formData.map((inputs, index) => {
                            return (
                                <Item stackedLabel key={index}>
                                    <Label>{inputs.label}</Label>
                                    <Input placeholder={inputs.placeholder} />
                                </Item>
                            )
                        })}
                    </Form>
                    <View style={styles.buttonCenter}>
                        <Button style={styles.buttonAddnewAddress}>
                            <Text> Continue</Text>
                        </Button>
                    </View>
                </View>
            )
        }

        const myCards = () => {
            return (
                <View style={styles.marginTopView}>
                    <Checkoutcards
                        cardDataJson={jsonData.billingCards}
                        selectedIndex={selectedIndex}
                        gotoSelectRadio={(i) => this.gotoSelectRadio(i)}
                    />
                    <View style={styles.marginTopItem}>
                        {this.state.buttonState ? <Button full style={styles.buttonHeight} light onPress={() => this.changeButtonState()}>
                            <Text style={styles.buttonText}> Cancel</Text>
                        </Button>
                            : <Button full style={styles.buttonHeight} light onPress={() => this.changeButtonState()}>
                                <Text style={styles.buttonText}> Add new payment method </Text>
                            </Button>
                        }
                    </View>

                    {this.state.buttonState &&
                        <View>
                            <PaymentDetailsForm
                                onValueChange={($value) => this.onValueChange($value)}
                                cardDetails={styles.cardDetails}
                                jsonList={jsonData.pickerCard}
                                selectedValue={this.state.selectedValue}
                                buttonSize={styles.buttonSize}
                                buttonTextColor={styles.buttonTextColor}
                            />
                        </View>
                    }
                </View>


            )
        }

        const myAddress = () => {
            return (
                <View>
                    <DeliveryAddresses
                        deliveryJson={jsonData.addresses}
                        selecteAddressdIndex={selecteAddressdIndex}
                        gotoSelectAddressRadio={(i) => this.gotoSelectAddressRadio(i)}
                    />
                    <View style={styles.buttonCenter}>
                        <Button style={styles.buttonAddnewAddress} onPress={this.openAddModal}>
                            <Text><Icon name={iconType} type='Ionicons' style={styles.addIcon} /> Add New Address</Text>
                        </Button>
                    </View>
                </View>

            )
        }

        return (
            <MyAccountView
                toggleDrawer={this.toggleDrawer}
                setModalInVisible={this.setModalInVisible}
                modalVisible={this.state.modalVisible}
                gotoSelectRadio={(i:number) => this.gotoSelectRadio(i)}
                selectedIndex={selectedIndex}
                goToMyCart={this.goToMyCart}
                profile={profile}
                myCards={myCards}
                myAddress={myAddress}
            />
        )
    }
}
export default MyAccountContainer;
