import React, { Component} from 'react'
import {StyleSheet, Text,View,Image,TouchableOpacity} from 'react-native'
import Button from 'apsl-react-native-button'
import {responsiveWidth,responsiveHeight} from 'react-native-responsive-dimensions'
import Icon from 'react-native-vector-icons/MaterialIcons';

import I18n from 'react-native-i18n'
let theme=require('./../../utils/theme.json')
let route=require('./../../route.json');
require('./../../utils/Translations');
export default class TypeChoiser extends Component{
    static navigatorStyle = {
        drawUnderNavBar: true,
        navBarHidden:true,
        drawUnderStatusBar: false,
        statusBarHidden: true,
        statusBarTextColorScheme: 'light',
    };

    static options(passProps){
        return {
            topBar:{
                visible:false,
                enabled:false,
                drawBehind: true,

            },
            statusBar:{
                drawBehind: true,
                enabled:false,
            }
        }
    }
    _SimpleUserCreator(){
        this.props.navigation.push(route.simpleusercreate,{
                type:0
        })
    }
    _geolocatedUser(){
        this.props.navigation.push(route.simpleusercreate,{
                type:1
        })
    }
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.container}>
          <View style={{flexDirection:'row',flex:1}}>
                <Icon.Button name={"keyboard-backspace"}
                color={"white"}
                size={24}
                backgroundColor={theme.primary}
                onPress={()=>this.props.navigation.pop()}
                />

                </View>
            <View  style={{justifyContent:'center',flex:10}}>
              
                <View

                    style={log.container}
                >
                    <Image style={log.img} source={require('./../../datas/img/icon3.png')}/>
                </View>
                <Text style={styles.textTitle}>{I18n.t('TITLE_CHOICE_TYPE_ACCOUNT')}</Text>
                <Button style={styles.btnStyle1} textStyle={styles.btnText1} onPress={()=>{this._SimpleUserCreator()}}>{I18n.t('USER_ACCOUNT')}</Button>
                <Button style={styles.btnStyle2} onPress={()=>this._geolocatedUser()}>{I18n.t('AGENT_ACCOUNT')}</Button>
                <TouchableOpacity onPress={()=>{this.props.navigation.pop()}}>
                    <Text style={styles.logintext}>{I18n.t('ALREADY_HAVE_AN_ACCOUNT')}</Text>
                </TouchableOpacity>
            </View>
            </View>
        )
    }

}
const log=StyleSheet.create({
    container:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center'
    },
    img:{
        width:responsiveWidth(90),
        resizeMode:'contain',
        alignSelf:'center'
    },
    title:{
        color:"white",
        fontSize:22,
        fontWeight:'bold',
        alignSelf:'center'
    }
})
const styles=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:theme.primary,
    },
    textTitle:{
      color:'white',
      fontSize:16,
        marginLeft:20,
        marginRight:20,
        marginBottom:20,
        marginTop:10,
        textAlign:'center',
        fontWeight:'bold'
    },
    logintext:{
        color:'white',
        alignSelf:'flex-end',
        marginRight:10
    },
    btnText1:{
      color:"white",
      fontSize:17,
        fontWeight:'bold'
    },
    btnStyle1:{
        marginLeft:responsiveWidth(5),
        marginRight:responsiveWidth(5),
        borderColor:'transparent',
        backgroundColor:theme.accentLight,
        height:responsiveHeight(8)
    },
    btnStyle2:{
        marginLeft:responsiveWidth(5),
        marginRight:responsiveWidth(5),
        backgroundColor:'white',
        borderColor:'transparent',
        height:responsiveHeight(8)

    }
})