import React from 'react';
import { View,StyleSheet,TextInput,Text} from 'react-native';
import {moderateScale} from '../../';

const convertToRupiahNoComa=(value)=>{
  value = value.toString().replace(/\D+/g,"")
    var rupiah = '';
    var angkarev = value.toString().split('').reverse().join('');
    for(var i = 0; i < angkarev.length; i++) if(i%3 == 0) rupiah += angkarev.substr(i,3)+'.';
  var result = rupiah.split('',rupiah.length-1).reverse().join('');
    return result;
}
const InputBoxMoney = ({...props,onChangeText,value,placeholder,multiline,multilineHeight})=>{
  value=value?value:'';
  placeholder=placeholder?placeholder:'Please Fill It';
  multiline=multiline?multiline:false;
  return(
    <View style={css.inpuContainer}>
        <TextInput
          style={[css.inputBtn,{minHeight: multiline?moderateScale(multilineHeight?multilineHeight:100):0}]}
          placeholder={placeholder}
          value={convertToRupiahNoComa(value)}
          onChangeText={(text)=>onChangeText(text)}
          multiline = {multiline}
          // onBlur={(text)=>onChangeText(text)}
          underlineColorAndroid={'transparent'}
        />
        <View style={{position: 'absolute',left: 0,top: 0,height: '125%',backgroundColor: '#f2f2f2',flex:1,padding: moderateScale(5),justifyContent: 'center',alignItems: 'center'}}>
          <Text style={{fontSize: moderateScale(18),fontWeight: '600'}}>Rp</Text>
        </View>
    </View>
  )
}
export {InputBoxMoney};

const css = StyleSheet.create({
  inpuContainer:{padding: moderateScale(5),borderWidth: moderateScale(2),borderColor: '#f2f2f2',borderRadius: moderateScale(5),marginBottom: moderateScale(5)},
  inputBtn:{position: 'relative',padding: moderateScale(10),fontSize: moderateScale(16),paddingLeft:moderateScale(40)},
});