import React from 'react';
 
import i18n from  "i18n-js";
import C from 'rn-class'

export default (props)=>{
    let {UpdateyourAccountDetails} = i18n.t("AccountInfo")
    let userInfoArr =[ 
                                        { key : "자유해결사"  , icon : {type:"antdesign" , name:"user" }} , 
                                        { key : "test@gmail.com" , icon : {type:"material-community" , name:"email-outline" } } ,
                                        { key : "testtest" , icon : {type:"material-community" , name:"lock-outline" }  , input : true } 
                                    ]
   
    let closeFunc  = ()=>{
        props.navigation.goBack();
    }
    return (
        <C.View cls="flx1 bgc-color-white ai-c"> 
          <C.EL.Header 
            ccls="bgc-color-transparent" 
            leftComponent={<C.EL.Icon type="antdesign" name="close" onPress={()=>props.navigation.goBack()}/>}  
        >
        </C.EL.Header>
        <C.View cls="mt3">
            <C.EL.Avatar  source={require("../res/header_bubble.png")}   size="xlarge" resizeMode="contain"  showEditButton rounded/>
        </C.View>

        <C.View cls="mt3">
            <C.Text cls="f2.5">
                {UpdateyourAccountDetails}
            </C.Text> 
            <C.Text  cls="f2.5">      
            Update your Account Details
            </C.Text>
        </C.View>

        {/* <C.View cls="mt2 w100% flx1 ai-c">   */}
            {
                userInfoArr.map((obj, i )=>{
                    let {key, icon, input } = obj;
                    return (
                        <C.View key={`item_${i}`} cls="w90% h8 br5 mt3 flx-row ai-c"> 
                            <C.EL.Icon {...icon} ccls="mh4" raised/>
                            {
                                input  ? (
                                    <C.TextInput secureTextEntry  value={key} /> 
                                ) : (
                                    <C.Text>{key}</C.Text> 
                                )
                            }
                        </C.View>
                    )
                })
            }

        {/* </C.View> */}

        {/* <C.View cls="br19 bgc-test1">   

        </C.View> */} 

            {/* <C.EL.Button  title="goback">
                 
            </C.EL.Button> */}
        </C.View>
    )  


}

 