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;

  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")}
            active={isRegistered}
            inactiveOnPress={() => setShowLog(true)}
          />

          <SvgLabeledButton
            label={"CHUVA"}
            onPress={() => navigation.navigate("RainSharingData")}
            SvgImage={assets.rainLevel.Rain_1_5}
            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")}
            SvgImage={assets.PluviometerIcon}
            active={isRegistered}
            inactiveOnPress={() => setShowLog(true)}
          />

          <SvgLabeledButton
            label={"NÍVEL ÁGUA\nNO RIO"}
            onPress={() => navigation.navigate("RiverFloodData")}
            SvgImage={assets.riverLevel.RiverIcon}
            active={isRegistered}
            inactiveOnPress={() => setShowLog(true)}
          />
        </View>
      </ScrollView>
      {!isRegistered && (
        <Text
          style={{
            color: colors.lightBlue,
            fontWeight: "bold",
            alignSelf: "center",
            position: "absolute",
            bottom: 0,
            padding: 24,
            textAlign: "center",
          }}
        >
          Para enviar uma informação, faça o login ou cadastre-se
        </Text>
      )}
    </View>
  );
}

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

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

export default SharingDataScreen;