import React from "react";
import { View } from "react-native";
import { Text, TextInput, RadioButton, Divider } from "react-native-paper";
import i18n from "../i18nMessages.js";
import Moment from 'moment';
import 'moment/min/locales';
import ProfileCardHorizontal from "../components/ProfileCardHorizontal.js";
Moment.locale(i18n.locale);
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';


let ProfileSettings = ()=>{
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;
    return (
        <View style={{
            padding: 10
        }}>
            <Text style={{marginBottom:10, fontSize:20}}>Profile Settings</Text>
            <View style={{flexDirection:"row", justifyContent:"space-between"}}>
                <TextInput
                    label="First Name"
                    style={{width:"48%", backgroundColor:"rgba(0,0,0,0)"}}
                    value={gState.me.profile.firstName}
                    //onChangeText={text => setText(text)}
                />
                <TextInput
                    label="Last Name"
                    style={{width:"48%", backgroundColor:"rgba(0,0,0,0)"}}
                    value={gState.me.profile.lastName}
                    //onChangeText={text => setText(text)}
                />
            </View>
            <TextInput
                label="Description"
                style={{backgroundColor:"rgba(0,0,0,0)"}}
                multiline={true}
                numberOfLines={3}
                value={gState.me.profile.description}
                //onChangeText={text => setText(text)}
            />
            <Divider />
            <View style={{paddingTop: 10}}>
                <ProfileCardHorizontal profileObj={gState.me} skipFollow={true} skiptOnPress={true} />
            </View>
        </View>
    )
}

export default ProfileSettings;