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

import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
import assets from "../config/assets";
import { scaleDimsFromWidth, dimensions } from "../config/dimensions";

//1/3

function SharingDataScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
          <TouchableOpacity
            style={{ alignItems: "center" }}
            onPress={() => navigation.navigate("FloodSharingData")}
          >
            <Image style={styles.icon} 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.icon} source={assets.rainLevel.rain_logo} />
            <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.icon} 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.icon} source={assets.riverLevel.riverIcon} />
            <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </View>
  );
}

const dims = scaleDimsFromWidth(248, 251, 35);

const styles = StyleSheet.create({
  text: {
    fontSize: dimensions.text.default,
    textAlign: "center",
    marginTop: 10,
  },
  icon: {
    width: dims.width * 0.8,
    height: dims.height * 0.8,
    marginTop: 30,
  },

  container: {
    paddingHorizontal: 10,
    flex: 1,
  },
});

export default SharingDataScreen;