import * as React from 'react';
import { connect } from "react-redux";
import { 
    SafeAreaView, 
    TouchableOpacity, 
    View, 
    Text, 
    FlatList,
    Image,
    StyleSheet,
    Modal
} from 'react-native';
import REQUEST_POST_PAY from '../../components/api/postpayapi';
import Icon from '../../components/icons.js';
import CustomHeader from '../../components/header.js';
import Theme from '../../components/theme.style.js';
import Assets from '../../components/assets.manager.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage/';
import CustomSafeArea from '../../components/safeArea.component';


class PayatpumpPaymentList extends React.Component {

    constructor(props) {
        super(props)
    }

    state = {
        cards: [],
        defaultCardIndex: -1,
        defaultSelectedCard: null,
        showModal: false,
        deleteCard: null,
        loading: false,
        isShowSelectionCard: this.props.route.params?.displaySelectionCard
    }

    componentDidMount() {
        this.getFunding()
    }

    getFunding = async (defaultCard = null, enableDefaultCard = false, setDefault = false) => {
        this.setState({ loading: true })
        const USER_PROFILE = await DB.profile()
        REQUEST_POST_PAY('getFunding', 'post', {
            token: USER_PROFILE.data.auth_p97
        }, {}, {}, async (res) => {
            this.setState({ loading: false })
            if(res.success == undefined) {
              setTimeout(() => {
                Alert.alert('Error', res.Message)
              }, 300)
            } else {
              if(res.success) {
                let savedCard = await DB.get("pumpPaymentCards");
                let selectedCard = JSON.parse(savedCard);
                let wallets = res.response.wallets.map(item => {
                    let wallet = item.wallets.map(walletItem => { 
                        let fundingProviderName = item.fundingProviderName
                        return {...walletItem, fundingProviderName}
                    })
                    return wallet
                })
                var mergedWallets = [].concat.apply([], wallets)
                let defaultIndex = -1;
                let selectedDefaultCard = null
                if(enableDefaultCard) { 
                    defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === defaultCard.userPaymentSourceId);
                    selectedDefaultCard = mergedWallets[defaultIndex];

                    if(setDefault) {
                        await DB.set(
                            "pumpPaymentCards",
                            JSON.stringify(selectedDefaultCard),
                            () => {},
                            () => {}
                        )
                    }
                } else {
                    if(selectedCard && !setDefault) {
                        defaultIndex = mergedWallets.findIndex(item => item.userPaymentSourceId === selectedCard.userPaymentSourceId);
                        selectedDefaultCard = mergedWallets[defaultIndex];
                    }
                }

                this.setState({ cards: mergedWallets, defaultCardIndex: defaultIndex, defaultSelectedCard: selectedDefaultCard, deleteCard: null })
              } else {
                setTimeout(() => {
                  Alert.alert('Error', 'Failed to get fund. Try again.')
                }, 300)
              }
            }
        }, (error) => {
            this.setState({ loading: false })
            setTimeout(() => {
                Alert.alert('Error', 'Failed to get fund. Try again.')
            }, 300)
        })
    }

    deleteCard = async () => {
        this.setState({ loading: true, showModal: false })
        const USER_PROFILE = await DB.profile()
        REQUEST_POST_PAY('deleteCreditCard', 'post', {
            token: USER_PROFILE.data.auth_p97
        }, {}, {
            userPaymentSourceId: this.state.deleteCard.userPaymentSourceId
        }, async (res) => {
            this.setState({ loading: false })
            if(res.success == undefined) {
              setTimeout(() => {
                Alert.alert('Error', res.Message)
              }, 300)
            } else {
              if(res.success) {
                let defaultCardIndex = -1;
                let defaultSelectedCard = null;
                let wallets = this.state.cards.filter(item => {
                    return item.userPaymentSourceId != this.state.deleteCard.userPaymentSourceId
                })
                .map(item => {
                    return item
                })

                if(wallets.length > 0) {
                    defaultCardIndex = 0;
                    defaultSelectedCard = wallets[defaultCardIndex];

                    this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)

                    await DB.set(
                        "pumpPaymentCards",
                        JSON.stringify(defaultSelectedCard),
                        () => {},
                        () => {}
                    )
                } else {
                    this.props.route?.params.onSelectedPaymentCard(null)

                    await DB.set(
                        "pumpPaymentCards",
                        JSON.stringify(null),
                        () => {},
                        () => {}
                    )
                }

                this.setState({ cards: wallets, defaultCardIndex: defaultCardIndex, defaultSelectedCard: defaultSelectedCard, deleteCard: null })
              } else {
                setTimeout(() => {
                  Alert.alert('Error', 'Failed to get fund. Try again.')
                }, 300)
              }
            }
        }, (error) => {
            this.setState({ loading: false })
            setTimeout(() => {
                Alert.alert('Error', error)
            }, 300)
        })
    }

    submitPaymentCard = async (defaultSelectedCard) => {
        if(defaultSelectedCard == null) {
            this.setState({ showModal: true })
            return
        }

        await DB.set(
            "pumpPaymentCards",
            JSON.stringify(defaultSelectedCard),
            () => {
                this.props.route?.params.onSelectedPaymentCard(defaultSelectedCard)
                this.props.navigation.goBack()
            },
            () => {}
        )

        
    }

    onAddNewCard = (response, enableDefaultCard, setDefault) => {
        this.getFunding(response, enableDefaultCard, setDefault)
    }

    renderDeleteErrorModal = () => {
        return (
            <Modal
                animationType="none"
                transparent={true}
                visible={this.state.showModal}>
                <TouchableOpacity activeOpacity={1} onPress={() => {}} style={styles.centeredView}>
                    <View style={[styles.modalView, { backgroundColor: this.props.app_theme?.theme.colors.border }]}>
                            {this.state.deleteCard != null ? (
                                <>
                                    <Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30, textAlign: 'center' }}>{'Are you sure you want to delete this card?'}</Text>
                                    <View style={{ flexDirection: 'row' }}>
                                        <TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 100, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10 }}>
                                            <Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>No</Text>
                                        </TouchableOpacity>
                                        <TouchableOpacity onPress={() => this.deleteCard()} style={{ width: 100, height: 30, backgroundColor: Theme.colors.white, alignItems: 'center', justifyContent: 'center', borderRadius: 5, borderColor: Theme.colors.primary, borderWidth: 0.5, marginLeft: 10 }}>
                                            <Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Yes</Text>
                                        </TouchableOpacity>
                                    </View>
                                </>
                            ) : (
                                <>
                                    <Image source={Assets.icons.points_balance} style={{ width: 85, height: 85, resizeMode: 'contain' }} />
                                    <Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30 }}>{'Please Select Card...'}</Text>
                                    <TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{ width: 80, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5 }}>
                                        <Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>Ok</Text>
                                    </TouchableOpacity>
                                </>
                            )}
                    </View>
                </TouchableOpacity>
            </Modal>
        )
    }

    renderCardList = () => {
        return (
            <FlatList
                keyExtractor={(item, index) => index.toString()}
                data={this.state.cards}
                scrollEnabled={true}
                showsVerticalScrollIndicator={false}
                style={{flex: 1}}
                contentContainerStyle={{flex: 1}}
                ListEmptyComponent={() => (
                    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                        <Text style={{color: Theme.colors.gray, fontSize: 15}}>Empty</Text>
                    </View>
                )}
                renderItem={({item, index}) => {
                    return (
                        <View style={{ flex: 1, flexDirection: 'row', marginLeft: 15 }}>
                            <TouchableOpacity activeOpacity={0.5} onPress={() => {
                                // this.setState({ defaultCardIndex: this.state.isShowSelectionCard ? -1 : this.state.defaultCardIndex == index ? -1 : index, defaultSelectedCard: this.state.defaultCardIndex == index ? null : item });
                                this.submitPaymentCard(item);
                            }} key={index} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white, padding: 12 }}>
                                <TouchableOpacity style={{borderColor: this.state.defaultCardIndex == index ? "blue" : "gray", borderWidth: 2, width: 20, height: 20, borderRadius: 10, marginRight: 10, paddingHorizontal: 2, paddingVertical: 2}}>
                                    {this.state.defaultCardIndex == index && <View style={{flex:1, borderRadius: 10, backgroundColor: 'blue'}} /> }
                                </TouchableOpacity>
                                <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                                    <Image source={{ uri: item.imageUrl }} style={{ width: 40, height: 40, resizeMode: 'contain', marginRight: 16 }} />
                                    <View>
                                        <Text style={{ fontSize: 15, color: this.props.app_theme?.theme.colors.text, textAlign: 'left' }}>{`**** **** **** ${item.lastFour}`}</Text>
                                        {this.state.defaultCardIndex == index && <Text style={{fontStyle: 'italic', fontSize: 11, color: '#6887ed'}}>Primary</Text>}
                                    </View>
                                </View>
                                <View style={{ borderRadius: 100, alignItems: 'center', backgroundColor: 'white', flexDirection: 'row', justifyContent: 'flex-end' }}>
                                    <TouchableOpacity onPress={() => this.setState({ deleteCard: item, showModal: true })}
                                    style={{ paddingVertical: 5 }}>
                                        <Icon.EvilIcons name={"trash"} size={40} color={Theme.colors.primaryDark} />
                                    </TouchableOpacity>
                                </View>
                            </TouchableOpacity>
                        </View>
                    )
                }}
                numColumns={1}
                />
        )
    }

    render() {
        return (
            <CustomSafeArea>
                <CustomHeader 
                    title={'Payment List'} 
                    onBackPress={() => this.props.navigation.goBack()} 
                    back={true}
                    menu={false}
                    navigation={this.props.navigation} 
                    />
                <Elements.loaderView 
                    title="Validating"
                    message="Please wait..."
                    isDarkMode={this.props.app_theme?.theme.dark}
                    backgroundColor={this.props.app_theme?.theme.colors.border}
                    color={this.props.app_theme?.theme.colors.text}
                    visible={this.state.loading} />
                <View style={{ flex: 1 }}>
                    {this.renderDeleteErrorModal()}
                    {this.renderCardList()}

                    <TouchableOpacity
                        onPress={() => this.props.navigation.navigate('PayatpumpPaymentMethod', { onAddNewCard: (newcard, enableDefaultCard) => this.onAddNewCard(newcard, enableDefaultCard)})}
                        style={{alignSelf: 'center'}}
                    >
                        <View style={{flexDirection: 'row', padding: 5}}>
                            <Icon.MaterialIcons
                                name="credit-card"
                                size={20}
                                color={Theme.colors.primary}
                            />
                            <Text
                                style={{
                                fontFamily: 'Arial',
                                color: Theme.colors.primary,
                                marginLeft: 10,
                                fontSize: 16,
                                }}>
                                Add a Card
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </CustomSafeArea>
        )
    }
}

const mapStateToProps = (state) => {
    return {
      app_theme: state.appThemeReducer.theme
    }
}

export default connect(mapStateToProps, null)(PayatpumpPaymentList)


const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "center",
        backgroundColor: '#00000090',
    },
    modalView: {
        margin: 25,
        backgroundColor: "white",
        borderRadius: 15,
        padding: 20,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5
    },
})