import React from 'react'
import {Platform, StatusBar, StyleSheet, Text, View} from 'react-native'
import BaseScreen from "../BaseScreen";
import {responsiveWidth} from 'react-native-responsive-dimensions'
import {Dropdown} from 'react-native-material-dropdown'
import I18n from 'react-native-i18n'
import Configuration from "../../webservice/persistences/Configuration";
import {IlinkEmitter} from "./../../utils/events"
import Icon from 'react-native-vector-icons/MaterialIcons';
import {SafeAreaView} from 'react-navigation';

const theme = require('./../../utils/theme.json');
const route = require('./../../route.json')

require("./../../utils/Translations")

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

})