import React from "react";
import { StyleSheet, View } from "react-native";

import { Image, Text, TouchableOpacity } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";
import RainSharingDataScreen from "../screens/RainSharingDataScreen";
import SharingFloodZonesScreen from "./SharingFloodZonesScreen";
import PluviometerSharingDataScreen from "./PluviometerSharingDataScreen";
import RiverFloodSharingDataScreen from "./RiverFloodSharingDataScreen";
import assets from "../config/assets";
//1/3

function SharingDataScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
        <TouchableOpacity
          style={{ alignItems: "center" }}
          onPress={() => navigation.navigate("FloodSharingData")}
        >
          <Image
            style={styles.floodingLogo}
            source={assets.floodZones.floodIcon}
          />
          <Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={{ alignItems: "center" }}
          onPress={() => navigation.navigate("RainSharingData")}
        >
          <Image
            style={styles.floodingLogo}
            source={assets.rainLevel.rain_2_5}
          />
          <Text style={styles.text}>Chuva</Text>
        </TouchableOpacity>
      </View>

      <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
        <TouchableOpacity
          style={{ alignItems: "center" }}
          onPress={() => navigation.navigate("PluviometerSharingData")}
        >
          <Image style={styles.floodingLogo} source={assets.pluviometer} />
          <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={{ alignItems: "center" }}
          onPress={() => navigation.navigate("RiverFloodData")}
        >
          <Image
            style={styles.floodingLogo}
            source={assets.riverLevel.riverIcon}
          />
          <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 14,
    textAlign: "center",
    marginTop: 10,
  },
  rainLogo: {
    width: 110,
    height: 100,
    margin: 30,
  },
  floodingLogo: {
    width: 85,
    height: 85,
    marginTop: 70,
  },
});

const Stack = createStackNavigator();

function RainSharingDataNavigator() {
  return (
    <Stack.Navigator initialRouteName="SharingData">
      <Stack.Screen
        name="SharingData"
        component={SharingDataScreen}
        options={{
          title: "Enviar uma informação",
          headerStyle: {
            backgroundColor: "lightgray",
          },
          headerTitleStyle: { alignSelf: "center" },
        }}
      />

      <Stack.Screen
        name="RainSharingData"
        component={RainSharingDataScreen}
        options={{
          title: "Enviar uma informação",
          headerStyle: {
            backgroundColor: "lightgray",
          },
        }}
      />
      <Stack.Screen
        name="FloodSharingData"
        component={SharingFloodZonesScreen}
        options={{
          title: "Enviar uma informação",
          headerStyle: {
            backgroundColor: "lightgray",
          },
        }}
      />
      <Stack.Screen
        name="PluviometerSharingData"
        component={PluviometerSharingDataScreen}
        options={{
          title: "Enviar uma informação",
          headerStyle: {
            backgroundColor: "lightgray",
          },
        }}
      />
      <Stack.Screen
        name="RiverFloodData"
        component={RiverFloodSharingDataScreen}
        options={{
          title: "Enviar uma informação",
          headerStyle: {
            backgroundColor: "lightgray",
          },
        }}
      />
    </Stack.Navigator>
  );
}

export default RainSharingDataNavigator;