import React from 'react';

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



const items = {
    "Account Info" : {page : "AccountInfo" , Icon : {type:"material-community" , name :"account-settings"}} ,
    Notice  : {page : "Notice" , Icon : {type:"antdesign" , name :"notification"}} ,
    FAQ : {page : "FAQ" , Icon : {type:"antdesign" , name :"questioncircle"}} , 
    "Change Language" : {page : "ChangeLanguage" , Icon : {type:"font-awesome" , name :"language"}} ,
    "Help & Support" :{page : "Support" , Icon : {type:"antdesign" , name :"customerservice"}} ,
    "Service Alarm" :{page : "ServiceAlarm" , Icon : {type:"material-community" , name :"alarm-multiple"}} ,
    About :{page : "About" , Icon : {type:"entypo" , name :"info"}} ,

}


export default (props)=>{    

    return (
        <C.View cls="flx1 bgc-color-white"> 
             <C.EL.Header 
                ccls="bgc-color-transparent"
                leftComponent={<C.Image source={require("../res/header_bubble.png")}  cls="ml2 w10 h10"  resizeMode="contain" />}  
                centerComponent={<C.Text cls="f3 fw-b ">{i18n.t(`Setting.title`)}</C.Text>}
                rightComponent={
                    <C.View cls="flx-row jc-sa w20 ">
                        <C.EL.Icon  name="ios-arrow-back" type="ionicon" onPress={()=>props.navigation.goBack()}/> 
                        {/* title="P" ccls="w10" btncls="br19.9"/> */}
                    </C.View>
                }
            >
            </C.EL.Header>
            <C.View cls="w100% ai-c flx0.9">       
                <C.ScrollView cccls="ai-c h100 w100" flx="flx1  bgc-test">  
                    {
                        Object.keys(items).map((key , idx )=>{
                            
                            let o =  items[key];
                            return (
                                <ItemView key={`item_${idx}`} {...props} data={o}  itemKey={key} ></ItemView>
                            ) 
                        })
                    }
                </C.ScrollView>
            </C.View>  
                <C.View cls="ai-c flx0.1 jc-c" >
                    <C.Text cls="fw-b">
                    Version 1.11
                    </C.Text>
                    <C.Text>
                    Logged in as DABUT@gmail.com
                    </C.Text>
                </C.View>
        </C.View>
    )  
}

const ItemView = ( props) =>{
    let {itemKey , data} = props;
    let onClick = (p)=>{
        // console.log(props.data.page);
        props.navigation.navigate(props.data.page);

    }
    console.log(itemKey);    
    return ( 
        <C.EL.ListItem cls="w100"
        title={i18n.t(`Setting.${itemKey}`)}
        subtitle={itemKey}
        leftIcon={ <C.EL.Icon {... data.Icon} raised />} 
        onPress={onClick }
        >
                {/* <C.EL.Icon />
            
                <C.Text>{itemKey}</C.Text> */}
            
        </C.EL.ListItem>
    )
}