WPD-MobileApp/src/app/screens/RiverFloodSharingDataScreen.js

import React, { useEffect, useState, useContext } from "react";
import { StyleSheet, View } from "react-native";
import * as Yup from "yup";

import { Form, SubmitButton, FormField } from "../components/forms";
import Screen from "../components/Screen";
import FormImagePicker from "../components/forms/FormImagePicker";
import { Text } from "react-native";
import colors from "../config/colors";
import { insertRiverData } from "../database/databaseLoader";
import { showMessage } from "react-native-flash-message";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import assets from "../config/assets";
import { dimensions } from "../config/dimensions";
import moment from "moment";
import { EventLocationContext } from "../context/EventLocationContext";
import PickEventDateLocation from "../components/PickEventDateLocation";
import SvgLabeledButton from "../components/SvgLabeledButton";

const validationSchema = Yup.object().shape({
  images: Yup.array(),
  description: Yup.string().label("Description"),
});

function RiverFloodSharingDataScreen(props) {
  const [riverScale, setRiverScale] = useState(-1);

  const context = useContext(EventLocationContext);

  useEffect(() => {
    context.defaultLocation();
  }, []);
  const location = context.eventCoordinates;
  const address = context.eventLocation;

  const [error, setError] = useState(false);

  const [date, setDate] = useState(moment());
  const [time, setTime] = useState(moment());

  return (
    <Screen style={styles.container}>
      <KeyboardAwareScrollView
        resetScrollToCoords={{ x: 0, y: 0 }}
        scrollEnabled={true}
      >
        <Form
          initialValues={{
            images: [],
            description: "",
          }}
          onSubmit={(values) => {
            if (riverScale == -1) {
              setError(true);
              return;
            }
            insertRiverData({
              ...values,
              riverScale,
              location,
              date,
              time,
              address,
            });
            showMessage({
              message: "Informação enviada!",
              duration: 1950,
              icon: "success",
              type: "success",
            });
            props.navigation.navigate("Home");
          }}
          validationSchema={validationSchema}
        >
          <View
            style={{
              paddingHorizontal: 16,
              paddingTop: 16,
              flexDirection: "column",
            }}
          >
            <View
              flexDirection="row"
              justifyContent="center"
              paddingBottom={16}
            >
              <View style={styles.imgs_row}>
                <SvgLabeledButton
                  style={{ marginRight: 17 }}
                  onPress={() => setRiverScale(0)}
                  SvgImage={assets.riverLevel.Low}
                  label={"BAIXO"}
                  isToggle={riverScale == 0}
                />

                <SvgLabeledButton
                  onPress={() => setRiverScale(1)}
                  SvgImage={assets.riverLevel.Normal}
                  label={"NORMAL"}
                  isToggle={riverScale == 1}
                />
              </View>
            </View>

            <View flexDirection="row" justifyContent="center">
              <SvgLabeledButton
                style={{ marginRight: 17 }}
                onPress={() => setRiverScale(2)}
                SvgImage={assets.riverLevel.High}
                label={"ALTO"}
                isToggle={riverScale == 2}
              />

              <SvgLabeledButton
                onPress={() => setRiverScale(3)}
                SvgImage={assets.riverLevel.High}
                label={"INUNDAR"}
                isToggle={riverScale == 3}
              />
            </View>
          </View>

          {error && riverScale == -1 && (
            <Text style={styles.error_txt}>Selecione o nível do rio</Text>
          )}

          <FormImagePicker backgroundColor={colors.primary} name="images" />

          <PickEventDateLocation
            setDate={setDate}
            setTime={setTime}
            navigation={props.navigation}
          />

          <Text style={styles.labelStyle}>Comentário:</Text>

          <FormField
            maxLength={255}
            multiline
            name="description"
            numberOfLines={3}
            placeholder="Escreva um comentário (Opcional)..."
          />

          <View paddingVertical={24}>
            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
          </View>
        </Form>
      </KeyboardAwareScrollView>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
  },
  imgs_row: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  error_txt: {
    fontSize: 18,
    color: colors.danger,
  },
  labelStyle: {
    paddingHorizontal: 16,
    paddingTop: 24,
    paddingBottom: 12,
    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
    color: colors.lightBlue,
  },
});

export default RiverFloodSharingDataScreen;