import React from "react";
import { View, ImageBackground } from "react-native";
import { Text, List, RadioButton } from "react-native-paper";
import i18n from "../i18nMessages.js";
import Moment from 'moment';
import 'moment/min/locales';
Moment.locale(i18n.locale);


let MenuView = ({navigation})=>{
    const [value, setValue] = React.useState('es');

    let changeLang = (locale) =>{
        i18n.locale = locale;
        Moment.locale(locale);
        setValue(locale);
    }
    
    return (
        <View>
            <ImageBackground source={require("../assets/settings.png")} 
                style={{paddingTop:10}} 
                imageStyle={{resizeMode:"contain", opacity: 0.05}}
            >
            <List.Section title="User Actions">
                <List.Item title={i18n.t('message.profile')} onPress={()=>{navigation.navigate("ProfileSettings")}} left={props => <List.Icon {...props} icon="person" />}  />
                <List.Item title={i18n.t('message.settings')} left={props => <List.Icon {...props} icon="settings" />}  />
                <List.Item title={i18n.t('message.logout')} onPress={()=>{navigation.navigate("Logout")}} left={props => <List.Icon {...props} icon="logout" />}  />
            </List.Section>
            <List.Section title="Fellowship App">
                <List.Item title={i18n.t('message.invite')} onPress={()=>{navigation.navigate("Invite")}} left={props => <List.Icon {...props} icon="person-add" />} />
                <List.Item title={i18n.t('message.about')} left={props => <List.Icon {...props} icon="more" />} />
            </List.Section>
            <View style={{padding: 10}}>
                <Text>Language:</Text>
                <RadioButton.Group onValueChange={newValue => changeLang(newValue)} value={value}>
                    <RadioButton.Item value="es" label="Español"/>
                    <RadioButton.Item value="en" label="English"/>
                </RadioButton.Group>
            </View>
            </ImageBackground>
        </View>
    )
}

export default MenuView;