import * as React from 'react';
import { connect } from "react-redux";
import { 
    SafeAreaView, 
    TouchableOpacity, 
    View, 
    Text, 
    FlatList,
    Image,
    StyleSheet,
    Alert,
    Modal
} from 'react-native';
import { returnIcon } from '../../utils/card';
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,
        showCardAdded: false,
        showCardDeleted: false,
        deleteCard: null,
        loading: false,
        newlyAddedCard: null,
        isShowSelectionCard: this.props.route.params?.displaySelectionCard
    }

    componentDidMount() {
        this.getFunding()
    }

    getFunding = async (defaultCard = null, enableDefaultCard = false, setDefault = false) => {
        this.setState({ loading: true })
        REQUEST_POST_PAY('getFunding', 'post', {}, {}, {}, async (res) => {
            this.setState({ loading: false })
            if(!res.status) {
                Alert.alert("Information", '\n' + 'Failed to get fund. Try again.')
            } else {
                let savedCard = await DB.get("pumpPaymentCards");
                let selectedCard = JSON.parse(savedCard);
                let wallets = res.data.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];
                
                    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 })
            }
        }, (error) => {
            this.setState({ loading: false })
            setTimeout(() => {
                Alert.alert("Information", '\n' + '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("Information", '\n' + res.Message)
              }, 300)
            } else {
              if(res.success) {
                let selectedCard = await DB.get("pumpPaymentCards");
                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) {
                    let checker = wallets.find(item => item.userPaymentSourceId === selectedCard.userPaymentSourceId);
                    if(!checker) {
                        defaultCardIndex = 0;
                        defaultSelectedCard = wallets[defaultCardIndex];

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

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

                    await DB.set(
                        "pumpPaymentCards",
                        JSON.stringify(null),
                        () => {},
                        () => {}
                    )
                }
                
                this.setState({ showCardDeleted: true, cards: wallets, defaultCardIndex: defaultCardIndex, defaultSelectedCard: defaultSelectedCard, deleteCard: null })
              } else {
                setTimeout(() => {
                  Alert.alert("Information", '\n' + 'Failed to get fund. Try again.')
                }, 300)
              }
            }
        }, (error) => {
            this.setState({ loading: false })
            setTimeout(() => {
                Alert.alert("Information", '\n' + error)
            }, 300)
        })
    }

    setDefaultCard = async (defaultSelectedCard) => {
        let USER_PROFILE = await DB.profile();

        let data = {
            "fundingProviderName": "p97token",
            "userPaymentSourceId": defaultSelectedCard.userPaymentSourceId
        }

        REQUEST_POST_PAY("postPayDefaultCard", "post", {
            token: USER_PROFILE.data.auth_p97
        }, {}, data, (res) => {
        }, (err) => {
        })
    }

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

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

    onSetLoading = () => {
        this.setState({ loading: true })
    }

    onAddNewCard = (response, enableDefaultCard) => {
        this.setState({showCardAdded: true, newlyAddedCard: response});
        this.getFunding(response, enableDefaultCard);
    }

    returnCardName = (card) => {
        let newCard = card.cardIssuerId;
        if(newCard.includes("-")) {
            newCard = newCard.split("-")[0];
        }

        if(newCard === "Mastercard") {
            newCard = "MASTER"
        }
        
        return newCard.toUpperCase();
    }

    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.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.white }]}>
                        <Text style={{fontSize: 20, color: this.props.app_theme?.theme.colors.text, marginBottom: 18, fontWeight: 'bold'}}>Confirmation</Text>
                        <Text style={{textAlign: 'center', fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginBottom: 37}}>Are you sure you want to delete{'\n'}this card?</Text>
                        <View style={{flexDirection: 'row'}}>
                            <TouchableOpacity onPress={() => this.setState({ showModal: false })} style={{
                                flex: 1,
                                alignItems: 'center',
                                justifyContent: 'center',
                                paddingVertical: 7,
                                marginRight: 6,
                                borderWidth: 1,
                                borderColor: Theme.colors.primary,
                                borderRadius: 5
                            }}>
                                <Text style={{
                                    fontSize: 17,
                                    color: Theme.colors.primary
                                }}>No</Text>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => this.deleteCard()} style={{
                                flex: 1,
                                alignItems: 'center',
                                justifyContent: 'center',
                                marginLeft: 6,
                                paddingVertical: 7,
                                borderWidth: 1,
                                borderColor: Theme.colors.primary,
                                backgroundColor: Theme.colors.primary,
                                borderRadius: 5
                            }}>
                                <Text style={{
                                    fontSize: 17,
                                    color: Theme.colors.white
                                }}>Yes</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>
            </Modal>
        )
    }

    renderCardAdded = () => {
        let card = this.state.cards.find(item => item.userPaymentSourceId === this.state.newlyAddedCard?.userPaymentSourceId);
        if(card && this.state.showCardAdded && !this.state.loading) {
            return (
                <View style={{
                    position: 'absolute',
                    top: 0,
                    right: 0,
                    left: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0,0,0,.4)',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <View style={{
                        backgroundColor: 'white',
                        width: Theme.screen.w * .8,
                        padding: 20,
                        alignItems: 'center'
                    }}>
                        <Image style={{height: 90, width: 90, resizeMode: 'contain', alignSelf: 'center'}} source={require('../../assets/pump_addcard.png')}/>
                        <Text style={{fontWeight: 'bold', textAlign: 'center', fontSize: 14, marginVertical: 20}}>{this.returnCardName(card)} ending in {card?.lastFour} has been{'\n'}successfully added!</Text>

                        <TouchableOpacity onPress={() => {this.setState({ showCardAdded: false, newlyAddedCard: null })}} style={{paddingVertical: 10, borderRadius: 5, marginTop: 10, width: 120, backgroundColor: Theme.colors.primary, alignItems: 'center'}}>
                            <Text style={{fontSize: 17, color: Theme.colors.white}}>OK</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )
        }

        return null
    }

    renderCardDeleted = () => {
        if(this.state.showCardDeleted) {
            return (
                <View style={{
                    position: 'absolute',
                    top: 0,
                    right: 0,
                    left: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0,0,0,.4)',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <View style={{
                        backgroundColor: 'white',
                        width: Theme.screen.w * .8,
                        padding: 20,
                        alignItems: 'center'
                    }}>
                        <Text style={{fontWeight: 'bold', fontSize: 17, marginBottom: 20}}>Deleted Successfully</Text>
                        <Text style={{textAlign: 'center', fontSize: 15, marginBottom: 10}}>Your card has been successfully{'\n'}deleted!</Text>
                        <TouchableOpacity onPress={() => {this.setState({ showCardDeleted: false })}} style={{paddingVertical: 5, borderRadius: 5, marginTop: 10, width: 120, backgroundColor: Theme.colors.primary, alignItems: 'center'}}>
                            <Text style={{fontSize: 17, color: Theme.colors.white}}>OK</Text>
                        </TouchableOpacity>
                    </View>
                </View> 
            )
        }

        return null;
    }

    renderCardList = () => {
        return (
            <FlatList
                keyExtractor={(_, index) => index.toString()}
                data={this.state.cards}
                scrollEnabled={true}
                showsVerticalScrollIndicator={false}
                style={this.state.cards.length === 0 && {flex: 1}}
                contentContainerStyle={this.state.cards.length === 0 && {flex: 1}}
                ListEmptyComponent={() => (
                    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                        <Image source={Assets.icons.empty_card} style={{height: 80, marginBottom: 10, resizeMode: 'contain'}}/>
                        <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.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 }}>
                                <View style={{borderColor: this.state.defaultCardIndex == index ? Theme.colors.primary : "gray", borderWidth: 2, width: 15, height: 15, borderRadius: 7.5, marginRight: 10, paddingHorizontal: 2, paddingVertical: 2}}>
                                    {this.state.defaultCardIndex == index && <View style={{flex:1, borderRadius: 10, backgroundColor: Theme.colors.primary}} /> }
                                </View>
                                <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
                                    <Image source={returnIcon(item.cardIssuerId)} 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.renderCardList()}

                    <TouchableOpacity
                        onPress={() => this.props.navigation.navigate('PayatpumpPaymentMethod', { onSetLoading: () => this.onSetLoading(), 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,
                                marginBottom: 10,
                                fontSize: 16,
                                }}>
                                Add a Card
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
                {this.renderCardAdded()}
                {this.renderCardDeleted()}
                {this.renderDeleteErrorModal()}
            </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",
        paddingHorizontal: 20,
        paddingVertical: 30,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5
    },
})