import React from 'react';
import { Image, ImageBackground, StyleSheet, View, TouchableOpacity, } from 'react-native';
import { Text, } from 'react-native-paper'
import 'react-native-get-random-values';
import { useMockState } from '../contexts/MockContext';

const Account = ({navigation}) => {
    const {dispatch, state} = useMockState();

    return(
        <ImageBackground style={styles.container} source={require('../assets/cover.jpg')}>
            <View style={styles.contentContainer}>
                <Image style={styles.pfp} source={require('../assets/default-pfp.png')}/>
                <View style={styles.quickStats}>
                    <Text>{state.rank}</Text>
                    <Text>{state.landmarks.filter(l => l.postedBy == state.username).length}</Text>
                    <Text></Text>
                </View>
            </View>
        </ImageBackground>
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end'
  },

  contentContainer: {
    backgroundColor: '#df3f3f',
    height: '80%',
    alignItems: 'center'
  },
  pfp: {
    marginTop: -75,
    borderRadius: 75,
    zIndex: 5,
    height: 150,
    width: 150,  
  },
  quickStats: {
      width: '100%',
    marginTop: 50,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
  },
  title: {
    fontFamily: 'RacingSansOne-Regular',
    marginTop: 30, 
    color: 'white',
    fontSize: 30
  },

  textContainer: { 
    marginHorizontal: 20,
    borderRadius: 50,
  },

  textInput: {
    marginBottom: 10,
    paddingLeft: 30,
    borderRadius: 50,
    overflow: 'hidden',
    backgroundColor: 'white',
    height: 50
  },

  loginBtn: {
    borderRadius: 50,
    width: 170,
    marginLeft: 10,
    justifyContent: 'center',
    backgroundColor: '#df3f3f',
    height: 60,
    alignItems: 'center'
  },

  registerBtn: {
    width: 170,
    marginRight: 10,
    borderColor: 'white',
    borderWidth: 2,
    borderRadius: 50,
    justifyContent: 'center',
    backgroundColor: 'transparent',
    height: 60,
    alignItems: 'center'
  },

  btnContainer: {
    flexDirection: 'row-reverse',
    justifyContent: 'center'
  },
})
 
export default Account;