import React, {useEffect, useState} from 'react';
import {Alert} from 'react-native' 
 
import i18n from  "i18n-js";
import C from 'rn-class'
import {LM} from '../provider/Auth'
import Net from '../provider/Net';
import _ from 'lodash'

userInfoObj = {
    name : {
        value : "",
        icon : {type:"antdesign" , name:"user"},
        placeholder : "name"
    },
    email : {
        value : "",
        icon : {type:"material-community" , name:"email-outline"},
        placeholder : "email"
    }
}
export default (props)=>{
    let {UpdateyourAccountDetails} = i18n.t("AccountInfo")
 
    let [userInfo , setUserInfo] = useState({});
   
    let closeFunc  = ()=>{
        props.navigation.goBack();
    }
    let logout = async ()=>{   
        await LM.logout();
        
        props.navigation.navigate('Login');

    }
    let getUserInfo = async ()=>{
        // console.log(await )
        let {result} = await Net.me(); 
        console.log("[" , userInfoObj);
        userInfoObj.name.value =  result.name;
        userInfoObj.email.value = result.email;
        userInfo = userInfoObj;
        setUserInfo(userInfoObj);  
        // console.log(userInfo)  
    }
    let updateMe = async()=>{
        let user = await Net.updateMe({name :userInfo.name.value , email : userInfo.email.value});
        // console.log(user).;
        if(user.status == 200){
            Alert.alert("저장 되었습니다.")
            getUserInfo();
        }
        
    }
    useEffect(()=>{
        getUserInfo();
    }, [])  
    return (
        <C.View cls="flx1 bgc-color-white ai-c jc-sa"> 
          <C.EL.Header  
            ccls="bgc-color-transparent" 
            leftComponent={<C.EL.Icon type="antdesign" name="close" onPress={()=>props.navigation.goBack()}/>}  
        >
        
        </C.EL.Header>
         <C.EL.Button  ccls="w100 " btncls="r5 mt-10 po-ab" title="Save" onPress={updateMe}/>
        <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">   */}
            {
                // console.log(userInfo , " > ") 
                Object.keys(userInfo).map((key , i )=>{
                    let {value , icon, placeholder} =  userInfo[key];
                    console.log(userInfo[key]) 
                    return (
                        <C.View key={`item_${i}`} cls="w100% h8 br5 mt3 flx-row ai-c jc-c ph10"> 
                            <C.EL.Icon {...icon} ccls="mh4" raised/>
                                <C.EL.Input  value={value}   placeholder={placeholder}  onChangeText={(t)=>{userInfo[key] .value= t;setUserInfo(_.clone(userInfo));   }}/>    
                        </C.View>      

                    )
                })  
                // userInfoArr.map((obj, i )=>{
                //     let {key, icon, input, value } = 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  value={value} /> 
                //                 ) : (
                //                     <C.Text>{value}</C.Text> 
                //                 )
                //             }
                //         </C.View>
                //     )
                // })
            }

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

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

        </C.View> */} 

           
            <C.EL.Button  title="LogOut" onPress={logout}>
            
            </C.EL.Button>
        </C.View>
    )  


}

 