address container

// ko mike address container
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    SafeAreaView,
    ScrollView,
    TouchableOpacity,
    View,
    Image,
    TextInput,
    ImageBackground,
} from 'react-native';
import {validateAddressCurrency, dynamicText} from '../common'


export default class AddressContainer extends Component {
    state = {
        refundAddress: '',
        refundTag: '',
        hasInputBoolean: false
    }
    render() {

        const {valueCurrency, name, isRefund} = this.props;
        const {refundAddress, refundTag, hasInputBoolean} = this.state;

        const refundAddressValid = validateAddressCurrency(valueCurrency, refundAddress);

        let isXrp = name === "XRP" ? true : false
        let receivePlaceHolder = isXrp ? 'Ripple address' : 'Etherium address'
        console.log(`refundAddressValid : ${refundAddressValid}`)
        console.log(`hasInputBoolean : ${hasInputBoolean}`)

        return (
            <View style={styles.inputValueContainer} >
                {isXrp && <View style={{ flex: 1, flexDirection: 'column' }}>
                    {!refundAddressValid && hasInputBoolean &&
                        <Text style={styles.errorLabel}>
                            {"ADDRESS IS INVALID"}
                        </Text>}
                    <TextInput style={styles.inputValueTextField}
                        underlineColorAndroid={'transparent'}
                        value={`${refundAddress}`}
                        placeholder = { isRefund ? 'Refund address' : receivePlaceHolder}
                        onChangeText={(refundAddress) => {
                            this.setState({ refundAddress, hasInputBoolean: true })
                        }}
                    />
                    {refundAddressValid && <TextInput style={styles.inputValueTextField}
                        underlineColorAndroid={'transparent'}
                        value={`${refundTag}`}
                        placeholder = {'Tag'}
                        onChangeText={(refundTag) => {
                            this.setState({ refundTag })
                        }}
                    />}
                </View>}

                {!isXrp && <View style={{ flex: 1, flexDirection: 'column' }}>
                {!refundAddressValid && hasInputBoolean &&
                        <Text style={styles.errorLabel}>
                            {"ADDRESS IS INVALID"}
                        </Text>}
                    <TextInput style={styles.inputValueTextField}
                        underlineColorAndroid={'transparent'}
                        value={`${refundAddress}`}
                        placeholder = { isRefund ? 'Refund address' : receivePlaceHolder}
                        onChangeText={(refundAddress) => {
                            this.setState({ refundAddress, hasInputBoolean: true })
                        }}
                    />
                </View>}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    inputValueContainer: {
        backgroundColor: '#fff',
        margin: 16,
        borderRadius: 4,
        height: 70,
        borderWidth: 1,
        borderColor: '#4F4F4F',
        overflow: 'hidden',
        flexDirection: 'row'
    },
    inputValueTextField: {
        marginLeft: 4,
        marginRight: 4,
        height: 30,
        fontSize: 12,
        fontWeight: 'normal',
        textAlign: 'left',
        color: '#000',
    },
    errorLabel: {
        marginTop: 4,
        marginLeft: 4,
        marginRight: 4,
        fontSize: 8,
        fontWeight: 'normal',
        textAlign: 'left',
        color: 'rgb(244,67,54)',
    }
})