import React,{Component} from 'react'
import {StyleSheet,Text,View,Alert} from  'react-native'
import BaseScreen from "../BaseScreen";
import {responsiveWidth,responsiveHeight} from 'react-native-responsive-dimensions'
import {Dropdown} from 'react-native-material-dropdown'
import {disconnect} from './../../webservice/AuthApi'
const theme=require('./../../utils/theme.json');
const route=require('./../../route.json')
import I18n,{getLanguages} from 'react-native-i18n'
import Configuration from "../../webservice/persistences/Configuration";
import Button from "apsl-react-native-button"
require("./../../utils/Translations")
import {IlinkEmitter} from "./../../utils/events"
import {Header} from "react-native-elements";
import Icon from 'react-native-vector-icons/MaterialIcons';
import { TouchableOpacity } from 'react-native-gesture-handler';

export default class Configurations extends  BaseScreen{

    static navigationOptions = {
        headerTitle: I18n.t('CONFIGURATIONS'),
        drawerIcon: ({ tintColor }) => (
            <Icon
                name={'settings'}
                size={24}
            />
        ),
    };
    constructor(props){
        super(props,true)
        this.state=this.initState()
        this.configuration=new Configuration();
    }

    initState(){
        let language=[];
        language.push({name:I18n.t('langue.english'),value:'en'});
        language.push({name:I18n.t('langue.french'),value:'fr'});

        return{
            languages:language
        }

    }
    render() {
        console.log(this.state)
        return (<View style={styles.container}>

            <View
                style={{width:responsiveWidth(90),
                    marginTop:20,
                    alignSelf:'center',
                    borderRadius:10,
                    paddingLeft:20,
                    paddingRight:20,
                    backgroundColor:'white'}}

            >

                <Text style={{fontSize:17,}}>{I18n.t("CHOOSE_LANGUAGE")}</Text>
                <Dropdown
                    label={I18n.t("CHANGE_LANG_LABEL")}
                    data={this.state.languages}
                    onChangeText={(value,index,data)=>{
                        I18n.locale = value
                        this.setState({language:value})
                        this.configuration.setCurrentLangue(data[index])
                        IlinkEmitter.emit('langueChange')
                    }}
                    valueExtractor={(value)=>value.value}
                    labelExtractor={(value)=>value.name}
                />
                            </View>

      
        </View>);
    }
}
const styles=StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'white'
    },

})