import * as React from 'react';
import { connect } from "react-redux";
import { 
    SafeAreaView, 
    TouchableOpacity, 
    View, 
    Text,
    Keyboard,
    ScrollView,
    TextInput,
    Dimensions
} from 'react-native';
import Theme from '../../components/theme.style.js';


class PayatpumpPaymentSuccess extends React.Component {

    constructor(props) {
        super(props)
    }

    state = {
        email: null,
        keyboardHeight: 0,
        data: this.props.route?.params?.transactionData
    }

    componentDidMount() {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow)
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide)
    }

    componentWillUnmount() {
        this.keyboardDidShowListener.remove()
        this.keyboardDidHideListener.remove()
    }

    _keyboardDidShow = (value) => {
        this.setState({ keyboardHeight: value.endCoordinates.height - 120 })
    }
        
    _keyboardDidHide = () => {
        this.setState({ keyboardHeight: 0 })
    }

    render() {
        return(
            <SafeAreaView style={{ flex: 1 }}>
                <ScrollView style={{ flex: 1 }}
                contentContainerStyle={{ height: "100%" }}
                contentOffset={{ x: 0, y: this.state.keyboardHeight }}
                keyboardDismissMode='on-drag'>
                    <View style={{ paddingTop: 40, justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ color: this.props.app_theme?.theme.colors.text, fontSize: 25, textAlign: 'center' }}>{"Your transaction is" + "\n" +  "successful!" + "\n" + "Payment is credited to"}</Text>
                    </View>
                    <View style={{ justifyContent: 'center', alignItems: 'center', paddingHorizontal: 50, paddingTop: 20, paddingBottom: 20}}>
                        <Text style={{ color: Theme.colors.primary, fontSize: 30, textAlign: 'center' }}>{`${this.state.data.storeName}`}</Text>
                    </View>
                    <View style={{ flex: 1, paddingHorizontal: 10 }}>
                        <View style={{ flex: 0.1, flexDirection: 'row', backgroundColor: Theme.colors.primary, padding: 15, marginHorizontal: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10 }}>
                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', marginRight: 16 }}>
                                <Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }}>Transaction Date</Text>
                                <Text style={{ color: Theme.colors.white, fontWeight: 'bold', textAlign: 'left', fontSize: 16 }} numberOfLines={1} adjustsFontSizeToFit>07 Oct 2020, 12:00 PM</Text>
                            </View>
                            <View style={{ flex: 0.7, justifyContent: 'center', marginLeft: 16 }}>
                                <Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }} numberOfLines={1} adjustsFontSizeToFit>Sales Invoice No.</Text>
                                <Text style={{ color: Theme.colors.white, textAlign: 'left', fontSize: 16 }} numberOfLines={1}>{this.state.data?.transactionId}</Text>
                            </View>
                        </View>
                        <View style={{ backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white, marginHorizontal: 10, borderColor: this.props.app_theme?.theme.colors.text, borderWidth: 0.5, borderBottomRightRadius: 10, borderBottomLeftRadius: 10, padding: 3 }}>
                            <View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
                                <Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 18, paddingVertical: 5, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'left' }}>Total Payment</Text>
                                <Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, fontWeight: 'bold', marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${this.state.data?.totalPayment}`}</Text>
                            </View>
                            <View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
                                <Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Card Payment</Text>
                                <Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${this.state.data?.cardPayment}`}</Text>
                            </View>
                            <View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
                                <Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Points</Text>
                                <Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${0}`}</Text>
                            </View>
                            <View style={{ flexDirection: 'row', backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
                                <Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'left' }}>Earned Points</Text>
                                <Text style={{ flex: 1, color: this.props.app_theme?.theme.colors.text, fontSize: 15, paddingVertical: 5, marginHorizontal: 13, textAlign: 'right' }}>{`${'\u20B1'}${0}`}</Text>
                            </View>
                        </View>
                    </View>
                    {/* <View style={{ flex: 0.3, justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, fontStyle: 'italic', marginBottom: 16 }}>Send receipt to Email</Text>
                        <TextInput
                            keyboardType="email-address"
                            returnKeyType={'done'}
                            placeholder={"(Optional)"}
                            placeholderTextColor={Theme.colors.gray}
                            value={this.state.email}
                            onChangeText={(value) => this.setState({ email: value })}
                            style={{ width: Dimensions.get('screen').width - 60, height: 44, textAlign: 'center', fontSize: 18, borderWidth: 0.5, borderRadius: 5, color: this.props.app_theme?.theme.colors.text, borderColor: this.props.app_theme?.theme.colors.text }}
                            />
                    </View> */}
                </ScrollView>
                <View>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('Main')}
                    style={{ height: 50, backgroundColor: Theme.colors.primary, justifyContent: 'center', alignItems: 'center', margin: 16, borderRadius: 5 }}>
                        <Text style={{ color: Theme.colors.white, fontSize: 18 }}>Ok</Text>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        )
    }
}

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

export default connect(mapStateToProps, null)(PayatpumpPaymentSuccess)