/**
 * 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 { Toast, Root } from 'native-base';

import CheckoutView from './CheckoutView';
import { NavigationStackScreenProps } from 'react-navigation-stack';

interface Iprops extends NavigationStackScreenProps {

}

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

class Checkoutcontainer extends React.Component<Iprops,Istate> {
    constructor(props: Iprops) {
        super(props)
        this.state = {
            buttonState: false,
            selectedValue: 'Visa',
            showToast: false,
            selectedIndex: null,
            selecteAddressdIndex: null
        }
    }
    onValueChange = (value:any) => {
        this.setState({
            selectedValue: value
        });
    }
    goBack = () => {
        this.props.navigation.goBack()
    }
    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
            })
        }
    }
    changeButtonState = () => {
        this.setState({
            buttonState: !this.state.buttonState
        })
    }

    checkoutComplete() {
        Toast.show({
            text: 'Your order is successfully completed!',
            duration: 3000
        });

        this.props.navigation.navigate('GroceryHome')
    }

    render() {
        const { selectedIndex } = this.state
        const { selecteAddressdIndex } = this.state
        return (
            <Root>
                <CheckoutView
                    goBack={this.goBack}
                    selectedIndex={selectedIndex}
                    selecteAddressdIndex={selecteAddressdIndex}
                    gotoSelectRadio={(i:number) => this.gotoSelectRadio(i)}
                    buttonState={this.state.buttonState}
                    changeButtonState={this.changeButtonState}
                    onValueChange={this.onValueChange}
                    selectedValue={this.state.selectedValue}
                    gotoSelectAddressRadio={(i:number) => this.gotoSelectAddressRadio(i)}
                    checkoutComplete={() => this.checkoutComplete()}
                />
            </Root>
        )
    }
}
export default Checkoutcontainer;
