import React, { useState, useContext } from "react";
import { MaterialIcons } from "@expo/vector-icons";
import { StyleSheet, Text, View } from "react-native";
import { Form, SubmitButton } from "../components/forms";
import { showMessage } from "react-native-flash-message";
import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
import FormDatePicker from "../components/forms/FormDatePicker";
import colors from "../config/colors/";
import moment from "moment";
import { TouchableOpacity } from "react-native-gesture-handler";
import { FontAwesome5 } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { AuthContext } from "../auth/context";
import { Shadow } from "react-native-shadow-2";
import { AssembleIngestionPluvRegistration } from "../components/forms/AssembleIngestionObject";
import OnSubmitAwaitModal from "../components/forms/OnSubmitAwaitModal";
import OnSubmitMessageModal from "../components/forms/OnSubmitMessageModal";

const dims = scaleDimsFromWidth(85, 85, 25);

function Institution({ user }) {
  const institutionMap = {
    E: "Escola",
    D: "Defesa Civil",
    N: "Não governamental",
    O: "Outra",
    N: "Nenhuma",
  };

  return (
    <View style={{ marginBottom: 24 }}>
      <Text style={styles.label}>Tipo de instituição: </Text>
      <View style={{ flexDirection: "row", marginTop: 16 }}>
        <FontAwesome5 name="university" size={30} color={colors.primary} />
        <Text style={styles.subText}>
          {user.institutiontype
            ? institutionMap[user.institutiontype]
            : "Tipo de instituição não informado"}
        </Text>
      </View>

      <Text style={[styles.label, { marginTop: 24 }]}>
        Nome da instituição:
      </Text>
      <View style={{ flexDirection: "row" }}>
        <FontAwesome5 name="university" size={30} color={colors.primary} />
        <Text style={styles.subText}>
          {user.institution
            ? user.institution
            : "Nome da instituição não informado"}
        </Text>
      </View>
    </View>
  );
}

function LocationPicker({
  navigation,
  location,
  setLocationAddr,
  setGeoLocation,
  pluviometer,
}) {
  return (
    <View
      style={{
        flexDirection: "row",
        alignItems: "center",
        flexShrink: 1,
      }}
    >
      <MaterialIcons name="location-on" size={30} color={colors.primary} />

      {pluviometer && (
        <View style={{ flexDirection: "row", marginTop: 16 }}>
          <Text style={styles.subText}>
            {pluviometer?.address ? pluviometer.address : "Erro ao carregar endereço"}
          </Text>
        </View>
      )}

      {!pluviometer && (
        <View
          style={{
            marginLeft: 16,
            flex: 1,
          }}
        >
          <Shadow
            viewStyle={{ width: "100%", height: 48 }}
            offset={[0, 3]}
            distance={3}
            radius={4}
            startColor="rgba(0, 0, 0, 0.15)"
            paintInside={true}
          >
            <TouchableOpacity
              onPress={() =>
                navigation.navigate("FormMap", {
                  setLocationAddr: setLocationAddr,
                  setGeoLocation: setGeoLocation,
                })
              }
            >
              <View
                style={{
                  paddingLeft: 16,
                  backgroundColor: colors.white,
                  height: 48,
                  borderRadius: 5,
                  flexDirection: "row",
                  alignItems: "center",
                }}
              >
                <Text styles={styles.subText}>{location}</Text>
              </View>
            </TouchableOpacity>
          </Shadow>
        </View>
      )}
    </View>
  );
}

function PluvDateTimePicker({
  onDateChange,
  onTimeChange,
  date,
  time,
  formTypeFace,
  pluviometer,
}) {
  return (
    <View style={{ flex: 1 }}>
      {!pluviometer && (
        <FormDatePicker
          onDateChange={onDateChange}
          onTimeChange={onTimeChange}
          date={date}
          time={time}
          formTypeFace={formTypeFace}
        />
      )}
      {pluviometer && (
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
          }}
        >
          <MaterialCommunityIcons
            name="calendar-today"
            size={30}
            color={colors.primary}
          />
          <View style={{ flexDirection: "row", marginTop: 16 }}>
            <Text style={styles.subText}>
              {pluviometer.regiterDate ? pluviometer.regiterDate : "Erro ao carregar a data"}
            </Text>
          </View>
        </View>
      )}
    </View>
  );
}

function PluviometerRegisterScreen(props) {
  const [date, setDate] = useState(moment());
  const [time, setTime] = useState(moment());
  const [location, setLocationAddr] = useState("Defina o endereço no mapa");
  const [coordinates, setCoordinates] = useState(null);
  const { user, _ } = useContext(AuthContext);

  const [showAwaitModal, setShowAwaitModal] = useState(false);
  const [showMessageModal, setShowMessageModal] = useState(false);
  const [apiMessage, setApiMessage] = useState(null);

  const sendForm = async (date, time, user, address, coordinates) => {
    const isSent = await AssembleIngestionPluvRegistration(
      date,
      time,
      user,
      address,
      coordinates
    );
    if (isSent) {
      setApiMessage(isSent.ok);
    }

    return apiMessage;
  };

  return (
    <View style={{ padding: 10, flex: 1 }}>
      <OnSubmitAwaitModal show={showAwaitModal} />
      <OnSubmitMessageModal
        show={showMessageModal}
        setShow={setShowMessageModal}
        sucess={apiMessage}
        navigation={props.navigation}
      />
      <Form
        initialValues={{}}
        onSubmit={async () => {
          setShowAwaitModal(true);
          sendForm(date, time, user, location, coordinates).then((isSent) => {
            setShowAwaitModal(false);
            setShowMessageModal(true);
          });
        }}
      >
        <View style={{ padding: 6, flex: 1, flexDirection:"column" }}>
          <Text style={styles.title}>Cadastro do Pluviômetro</Text>
          <View style={{flex: 0.25}}>
            <Text
              style={{
                marginTop: 24,
                marginBottom: 16,
                fontSize: dimensions.text.secondary,
                fontWeight: "bold",
                textAlign: "left",
                color: colors.secondary,
              }}
            >
              Data do cadastro:
            </Text>

            <PluvDateTimePicker
              onDateChange={(value) => setDate(value)}
              onTimeChange={(value) => setTime(value)}
              date={date}
              time={time}
              formTypeFace={"pluviometerRegister"}
              pluviometer={user.pluviometer}
            />
          </View>
          <View style={{flex: 0.25}}>
            <Text style={styles.label}>Endereço do pluviômetro*: </Text>

            <View marginBottom={24}>
              <LocationPicker
                navigation={props.navigation}
                location={location}
                setLocationAddr={setLocationAddr}
                setGeoLocation={setCoordinates}
                pluviometer={user.pluviometer}
              />
            </View>
          </View>
          <View style={{flex: 0.25}}>
            <Institution user={user} />
          </View>
          <View style={{flex: 0.25}}>
            {!user.pluviometer && (
              <SubmitButton title="Cadastrar" paddingHorizontal={0} />
            )}
          </View>
        </View>
      </Form>
    </View>
  );
}

const styles = StyleSheet.create({
  image: {
    width: dims.width * 0.8,
    height: dims.height * 0.8,
    justifyContent: "center",
    alignItems: "center",
  },
  label: {
    fontSize: dimensions.text.secondary,
    marginBottom: 12,
    fontWeight: "bold",
    textAlign: "left",
    color: colors.secondary,
  },
  subText: {
    color: colors.subText,
    fontSize: 16,
    alignSelf: "center",
    fontWeight: "500",
    paddingLeft: 16,
  },
  title: {
    marginVertical: 24,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
    color: colors.primary,
  },
  date: {
    paddingLeft: 12,
    flexDirection: "column",
    justifyContent: "center",
  },
});

export default PluviometerRegisterScreen;