import React from "react";
import { StyleSheet, View } from "react-native";
import * as Yup from "yup";

import {
  Form,
  FormField,
  FormPicker as Picker,
  SubmitButton,
} from "../components/forms";
import CategoryPickerItem from "../components/CategoryPickerItem";
import Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import { Image, Text, TouchableOpacity} from 'react-native';
//1/3
const styles = StyleSheet.create({
  container:{
    paddingTop:50,
  },
  rainLogo: {
    width: 110,
    height:100,
    margin:30,
  },
  floodingLogo: {
    width: 85,
    height:85,
    marginTop: 70,

  },
})
class SharingDataScreen extends React.Component {
  static navigationOptions = {
  title: "SharingDataScreen",
  headerStyle: {
  backgroundColor: "#73C6B6"
  }
  };
  render() {
  return(
    <View style={styles.container}>      
      <Text style={{ fontSize: 25, textAlign: 'center', backgroundColor: 'lightgray'}}>
        Enviar uma informação
      </Text>
      <View style={{flexDirection:'row', justifyContent: 'space-around'}}>

      <TouchableOpacity>
        <Image
          style = {styles.floodingLogo}
          source={require("../assets/pontos_alagamento_peq.png")}
        />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate("RainSharingData")}>
        <Image
          style = {styles.floodingLogo}
          source={require("../assets/chuva_peq.png")}
        />
        </TouchableOpacity>
      </View>
      <View style={{flexDirection:'row'}}>
        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 50}}>Pontos de {"\n"}alagamento</Text>
        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10, marginLeft: 110}}>Chuva</Text>
      </View>

      <View style={{flexDirection:'row', justifyContent: 'space-around'}}>
        <Image
          style = {styles.floodingLogo}
          source={require("../assets/diario_pluviometrico.png")}
        />
        <Image    
          style = {styles.floodingLogo}
          source={require("../assets/nivel_rio.png")}
        />
      </View>      
      <View style={{flexDirection:'row', justifyContent: 'space-around'}}>
        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Diário do{"\n"}pluviômetro</Text>
        <Text style={{ fontSize: 20, textAlign: 'center', marginTop: 10}}>Nível de água {"\n"}no rio</Text>
      </View>
    </View>
  );
}
}

export default SharingDataScreen;