import * as React from 'react';
import { connect } from "react-redux";
import { 
    SafeAreaView, 
    TouchableOpacity, 
    View, 
    Text, 
    FlatList,
    Alert, 
    StyleSheet,
    Modal,
    Image
} from 'react-native';
import { Input } from 'react-native-elements';
import CustomHeader from '../../components/header.js';
import Theme from '../../components/theme.style.js';
import Assets from '../../components/assets.manager.js';


class PayatpumpPointsDetailsInput extends React.Component {

    constructor(props) {
        super(props)
    }

    state = {
        displaySelectedAmount: "",
        selectedAmount: 0,
        focus: false,
        showModal: false,
        balance: this.props.route.params?.totalPointsBalance
    }

    componentDidMount() {
        console.log(this.props)
    }

    componentWillUnmount() {

    }

    onAmountChange = (value) => {
        // console.log(Number(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'), this.state.selectedAmount)
        this.setState({ displaySelectedAmount: value, selectedAmount: parseFloat(value) })
    }

    renderErrorModal = () => {
        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.selectedAmount == 0 ? 
                        <>
                            <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 add Points...'}</Text>
                            <TouchableOpacity onPress={() => this.setState({ showModal: false, selectedAmount: 0 })} 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 style={{ alignItems: 'center', justifyContent: 'center' }}>
                            <Text style={{ fontSize: 18, color: this.props.app_theme?.theme.colors.text, marginVertical: 30, textAlign: 'center' }}>{`Are you sure you want to redeem ${"\u20B1"}${parseFloat(this.state.selectedAmount).toFixed(2)}?`}</Text>
                            <View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
                                <TouchableOpacity 
                                    style={{ flex: 1, height: 30, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'center', borderRadius: 5, marginRight: 10, marginLeft: 20 }}
                                    onPress={() => {
                                        this.setState({ showModal: false })
                                    }}>
                                    <Text style={{ fontSize: 18, color: Theme.colors.white, textAlign: 'center' }}>No</Text>
                                </TouchableOpacity>
                                <TouchableOpacity 
                                    style={{ flex: 1, height: 30, backgroundColor: Theme.colors.white, alignItems: 'center', borderColor: Theme.colors.primary, borderWidth: 1, justifyContent: 'center', borderRadius: 5, marginLeft: 10, marginRight: 20 }}
                                    onPress={() => {
                                        this.setState({ showModal: false })
                                        this.props.route.params.onSelectedPointsAmount(this.state.selectedAmount)
                                        this.props.navigation.goBack()
                                    }}>
                                    <Text style={{ fontSize: 18, color: Theme.colors.primary, textAlign: 'center' }}>Yes</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                        }
                    </View>
                </TouchableOpacity>
            </Modal>
        )
    }

    renderSelectAmount = () => {
        let amounts = ['50', '100', '300', '500']
        return (
            <>
                <View style={{ flex: 0.3, justifyContent: 'center' }}>
                    <Text style={{ marginLeft: 16, fontSize: 21, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text }}>Select default value</Text>
                </View>
                <View style={{ flex: 1, justifyContent: 'center' }}>
                    <FlatList
                        keyExtractor={(item, index) => index.toString()}
                        data={amounts}
                        scrollEnabled={false}
                        showsVerticalScrollIndicator={false}
                        renderItem={({item, index}) => {
                            return (
                                <View style={{ flex: 1 }}>
                                    <TouchableOpacity onPress={() => this.onAmountChange(item)} key={index} style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: Theme.colors.white, padding: 10, margin: 8, borderColor: Theme.colors.primary, borderWidth: 2, borderRadius: 5 }}>
                                        <Text style={{ fontSize: 30, color: Theme.colors.primary, fontWeight: 'bold', textAlign: 'center' }}>{item}</Text>
                                    </TouchableOpacity>
                                </View>
                            )
                        }}
                        numColumns={2}
                        />
                </View>
            </>
        )
    }

    renderDisplayAmountSelected = () => {
        return (
            <View style={{ flex: 2 }}>
                <Text style={{ padding: 18, fontSize: 20, color: this.props.app_theme?.theme.colors.text }}>Or enter desired value to redeem.</Text>
                <Input
                    keyboardType="numeric"
                    returnKeyType={'done'}
                    placeholder="Enter points value here"
                    value={this.state.displaySelectedAmount}
                    onFocus={() => this.setState({ focus: true })}
                    onChangeText={(value) => this.onAmountChange(value)}
                    containerStyle={{padding: 0}}
                    inputContainerStyle={{ padding: 0, marginHorizontal: 20, borderBottomWidth: this.state.focus ? 1.75 : 1, borderColor: this.state.focus ? Theme.colors.accent : "gray" }}
                    inputStyle={{ padding: 0, textAlign: 'center', fontSize: 18, fontWeight: 'bold', color: this.props.app_theme?.theme.colors.text }}
                    />
            </View>
        )
    }

    renderSubmitSelectedPoints = () => {
        return (
            <View style={{ flex: 0, justifyContent: 'center' }}>
                <Text style={{ flex: 0, padding: 8, textAlign: 'center', color: Theme.colors.primary, fontStyle: 'italic' }}>Ensure correct amount before you proceed.</Text>
                <View style={{ flex: 0, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}>
                    <TouchableOpacity style={{ flex: 1, padding: 15, backgroundColor: Theme.colors.primary, alignSelf: 'flex-end', marginHorizontal: 30, marginBottom: 10, borderRadius: 5 }} onPress={() => this.submitPoints()}>
                        <Text style={{ textAlign: 'center', fontSize: 23, color: Theme.colors.white, fontWeight: 'bold' }}>Confirm</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }

    submitPoints = () => {
        if(this.state.selectedAmount > parseFloat(this.state.balance)) {
            Alert.alert(
                'Error',
                'The desired amount of points is greater than the remaining points balance.',
                [
                  {
                    text: 'Ok',
                    style: 'cancel',
                  }
                ],
                {cancelable: true},
            );
            return
        }
        this.setState({ showModal: true })
    }

    render() {
        return (
            <SafeAreaView style={{ flex: 1 }}>
                <CustomHeader 
                    title={`${"3500.00"}` + '\n' + "Points Balance"} 
                    onBackPress={() => this.props.navigation.goBack()} 
                    back={true}
                    menu={false}
                    navigation={this.props.navigation} 
                    />
                {this.renderErrorModal()}
                {this.renderSelectAmount()}
                {this.renderDisplayAmountSelected()}
                {this.renderSubmitSelectedPoints()}
            </SafeAreaView>
        )
    }
}

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

export default connect(mapStateToProps, null)(PayatpumpPointsDetailsInput)

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
    },
})