import React, { Component } from 'react'
import { StyleSheet, Text, View, Alert, Platform, StatusBar } 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 { SafeAreaView } from 'react-navigation';

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();
          if (Platform.OS === 'android') {
               SafeAreaView.setStatusBarHeight(StatusBar.currentHeight);
          }
     }

     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',
     },

})