import React from "react";
import { View, ImageBackground, ScrollView } 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);
import API from '../API.js';
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';
import ProfileCardHorizontal from "../components/ProfileCardHorizontal.js";


let MenuView = ({ navigation }) => {
    const [value, setValue] = React.useState('es');
    const [myProfiles, setMyProfiles] = React.useState([]);
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;

    React.useEffect(() => {
        let subscribed = true;
        let getData = async () => {
            const r = await API.getMyProfiles();
            if (!subscribed) return;
            console.log("profiles", r)
            setMyProfiles(r);
        }
        getData();
        return () => {
            subscribed = false;
        }
    }, []);

    let changeLang = (locale) => {
        i18n.locale = locale;
        Moment.locale(locale);
        setValue(locale);
    }

    return (
        <ScrollView>
            <ImageBackground source={require("../assets/settings.png")}
                style={{ paddingTop: 10 }}
                imageStyle={{ resizeMode: "contain", opacity: 0.05 }}
            >
                <List.Section title={i18n.t("message.currentProfile")}>
                    <ProfileCardHorizontal profileObj={viewer} skipFollow={true} skiptOnPress={true} />
                </List.Section>
                <List.Section title={i18n.t("message.userActions")}>
                    <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={i18n.t("message.fellowshipApp")}>
                    <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>{i18n.t("message.language")}:</Text>
                    <RadioButton.Group onValueChange={newValue => changeLang(newValue)} value={value}>
                        <RadioButton.Item value="es" label={i18n.t("message.languageSpanish")} />
                        <RadioButton.Item value="en" label={i18n.t("message.languageEnglish")} />
                    </RadioButton.Group>
                </View>
            </ImageBackground>
        </ScrollView>
    )
}

export default MenuView;