/**
 * 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 { ToastAndroid } from 'react-native';

import CheckoutView from './CheckoutView';
import { NavigationStackScreenProps } from 'react-navigation-stack';
import { connect } from 'react-redux';
import { AppReduxState } from '../../../redux/reducers';
import { bindActionCreators } from 'redux';
import { getPaymentMethods, addPaymentMethod } from '../../../redux/actions/User';
import { PaymentMethodForm } from '../../../components/redux/paymentsDetails';
import { showToast } from '../../../utils';
import { Root } from "native-base";
import { clearCart } from '../../../redux/actions/Cart';

interface Iprops extends NavigationStackScreenProps, AppReduxState {
    actions:any;
}

interface Istates {
    buttonState: boolean,
    selectedIndex: number,
    selecteAddressdIndex: number
}

class Checkoutcontainer extends React.Component<Iprops,Istates> {
    constructor(props:any) {
        super(props)
        this.state = {
            buttonState: false,
            selectedIndex: -1,
            selecteAddressdIndex: -1
        }
    }

    componentDidMount() {
        const { actions } = this.props;
        actions.getPaymentMethods();
    }

    goBack = () => {
        this.props.navigation.goBack()
    }
    gotoSelectRadio= (index:any) => {
        const { selectedIndex } = this.state
        if (index === selectedIndex) {
            this.setState({
                selectedIndex: -1
            })
        } else {
            this.setState({
                selectedIndex: index
            })
        }
    }
    gotoSelectAddressRadio(index:any) {
        const { selecteAddressdIndex } = this.state
        if (index === selecteAddressdIndex) {
            this.setState({
                selecteAddressdIndex: -1
            })
        } else {
            this.setState({
                selecteAddressdIndex: index
            })
        }
    }
    changeButtonState = () => {
        this.setState({
            buttonState: !this.state.buttonState
        })
    }

    checkoutComplete = () => {
        const { actions } = this.props;
        actions.clearCart();
        showToast("Your order is successfully completed!", "bottom");
        this.props.navigation.navigate('Home')
    }

    addPaymentMethod = async (card:PaymentMethodForm) => {
        try {
            const { actions } = this.props;
            await actions.addPaymentMethod(card);
            this.setState({buttonState: false})
        } catch(e) {
            console.error(e)
        }
    }

    render() {
        const { selectedIndex } = this.state
        const { selecteAddressdIndex } = this.state
        const { user } = this.props;
        return (
            <Root>
            <CheckoutView
                paymentMethods={user.paymentMethods}
                goBack={this.goBack}
                selectedIndex={selectedIndex}
                selecteAddressdIndex={selecteAddressdIndex}
                gotoSelectRadio={this.gotoSelectRadio}
                buttonState={this.state.buttonState}
                changeButtonState={this.changeButtonState}
                gotoSelectAddressRadio={(i:any) => this.gotoSelectAddressRadio(i)}
                checkoutComplete={this.checkoutComplete}
                addPaymentMethod= {this.addPaymentMethod}
            />
            </Root>
        )
    }
}

const mapStateToProps = (state:AppReduxState) => {
    return{
        user: state.user
    };
}
const matchDispatchToProps = (dispatch:any) => ({
    actions: bindActionCreators({ getPaymentMethods, addPaymentMethod, clearCart },dispatch)
})

export default connect(mapStateToProps,matchDispatchToProps)(Checkoutcontainer);
