import React, { useEffect, useState, useContext } from "react";
import { StyleSheet, View, Text } from "react-native";
import ConfirmationModal from "../components/ConfirmationModal";
import { ScrollView } from "react-native";
import assets from "../config/assets";
import { dimensions } from "../config/dimensions";
import SvgLabeledButton from "../components/SvgLabeledButton";
import { AuthContext } from "../auth/context";
import colors from "../config/colors";

function SharingDataScreen({ navigation }) {
  const authContext = useContext(AuthContext);
  const [showLog, setShowLog] = useState(false);

  const isRegistered = authContext.user?.username != null;
  const pluviometer = authContext.user?.pluviometer;
  console.log(pluviometer)
  const currentUser = authContext.user;

  

  return (
    <View style={styles.container}>
      <ConfirmationModal
        show={showLog}
        description="Para enviar uma informação faça o login ou cadastre-se"
        confirmationLabel="LOGIN"
        onConfirm={() => authContext.setUser(false)}
        onDecline={() => setShowLog(false)}
      />
      <ScrollView>
        <View
          style={{
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            marginTop: 30,
          }}
        >
          <SvgLabeledButton
            label={"ÁREA DE \nALAGAMENTO"}
            style={{ marginRight: 24 }}
            SvgImage={assets.floodZones.FloodZonesIcon}
            onPress={() => navigation.navigate("FloodSharingData", { user: currentUser })}
            active={isRegistered}
            inactiveOnPress={() => setShowLog(true)}
          />

          <SvgLabeledButton
            label={"CHUVA"}
            onPress={() =>
              navigation.navigate("RainSharingData", { user: currentUser })
            }
            SvgImage={assets.rainLevel.RainIcon}
            active={isRegistered}
            inactiveOnPress={() => setShowLog(true)}
          />
        </View>

        <View
          style={{
            flexDirection: "row",
            justifyContent: "center",
            flex: 1,
            marginVertical: 24,
          }}
        >
          <SvgLabeledButton
            style={{ marginRight: 24 }}
            label={"DIÁRIO DO\nPLUVIÔMETRO"}
            onPress={() => navigation.navigate("PluviometerSharingData", { user: currentUser })}
            SvgImage={assets.PluviometricDataIcon}
            active={isRegistered && pluviometer}
            inactiveOnPress={() => setShowLog(true)}
          />

          <SvgLabeledButton
            label={"NÍVEL ÁGUA\nNO RIO"}
            onPress={() => navigation.navigate("RiverFloodData", { user: currentUser })}
            SvgImage={assets.riverLevel.RiverIcon}
            active={isRegistered}
            inactiveOnPress={() => setShowLog(true)}
          />
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: dimensions.text.default,
    textAlign: "center",
    marginTop: 10,
  },

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

export default SharingDataScreen;