// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/

// Import React and Component
import React from 'react';
import {StyleSheet, View, Text, SafeAreaView, TouchableOpacity, TextInput, ImageBackground} from 'react-native';
import { Formik } from 'formik';
import { FontAwesome } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { BottomTab } from "../Navigations/BottomTab";


export function  gamification ({navigation}) {
  return (
    <SafeAreaView style={{flex: 1, color: 'yellow'}}>
            <ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}>

        <Formik
        initialValues={{ name: ''}}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {props => (
          <View style={styles.container}>
            <View style={styles.iconView}>

            <MaterialCommunityIcons name="map-marker-distance" size={50} color="black" />
            </View>
            <Text style={styles.heading}> Enter Area </Text>
            <TextInput
              style={styles.input}
              placeholder='Area'
              onChangeText={props.handleChange('name')}
              value={props.values.title}
            />
            <View>

            <TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} > 
            <Text style={styles.buttonText}>Best Crop 1</Text>
            
            </TouchableOpacity>
            <TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} > 
            <Text style={styles.buttonText}>Best Crop 2</Text>
            
            </TouchableOpacity>
            <TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} > 
            <Text style={styles.buttonText}>Best Crop 3</Text>
            
            </TouchableOpacity>
            <TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} > 
            <Text style={styles.buttonText}>Best Crop 4</Text>
            
            </TouchableOpacity>
            </View>
            <View style={{
              alignSelf: 'center',
              marginTop:10
            }}>

            <FontAwesome name="money" size={50} color="black" />
            </View>
            <Text
          style={styles.textdata}>
          TOTAL EARNED $: 1000
        </Text>
          </View>
        )}
      </Formik>
     <BottomTab/>
     </ImageBackground>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    color: '#333',
    padding: 10,
    marginTop: 20,
    marginBottom: 10,
    width: "100%",
  },
  activityIndicator: {
    alignItems: 'center',
    height: 80,
  },
  Button:{
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    padding: 10,
    paddingTop: 10,
    fontSize: 18,
    borderRadius: 6,
    marginTop: 20,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10


  },
  heading: {
    textAlign: 'center',
    color: '#333',
    fontWeight: 'bold',
    padding: 10,
    fontSize: 18,
  },
  buttonSub: {
    width: "90%",
    padding: 10,
    marginTop: 20,
    marginLeft: 20,
    marginHorizontal: 10,
    backgroundColor: "#ff8000",
    flexDirection: "row",
    marginBottom: 10,
    justifyContent: "center",
    borderRadius:10
  },
  textdata:{
    fontSize: 18,
    textAlign: 'center',
    color: 'black',
    marginTop: 20,
    marginBottom: 5,

  },
  iconView:{
    alignSelf: 'center',
  },
  images:{
    height: '100%',
    justifyContent: 'center'
  }
});