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

import React, { useState } from "react";

import { StyleSheet, Text, View, Image, ScrollView, Modal, Platform } from "react-native";
import * as Yup from "yup";

import {
  Form,
  FormField,
  FormPicker as Picker,
  SubmitButton,
} from "../components/forms";
import Screen from "../components/Screen";
import useLocation from "../hooks/useLocation";
import FormImagePicker from "../components/forms/FormImagePicker";
import { insertPluviometerData } from "../database/databaseLoader";
import { TouchableHighlight, TouchableOpacity } from "react-native-gesture-handler";
import DateTimePicker from '@react-native-community/datetimepicker';
import { FontAwesome5 } from '@expo/vector-icons';
import { showMessage } from "react-native-flash-message";
import moment from 'moment';
import colors from "../config/colors";
import { scaleDimsFromWidth } from "../config/dimensions";

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

const validationSchema = Yup.object().shape({
  pluviometer: Yup.number().required("Campo obrigatório").min(0, "O valor deve ser maior ou igual a 0.").max(10000).label("pluviometer"),
  data: Yup.string().min(1, "Por favor preencha a data"),
  images: Yup.array(),
});

function PluviometerSharingDataScreen(props) {
  const location = useLocation();
  let dateTime = new Date().toString();
  /*-------------------------------------------DATETIMEPICKER------------------------------------------------

  const { textStyle, defaultDate } = props;
  const [date, setDate] = useState(moment(defaultDate))
  const [show, setShow] = useState(false);
  
  //---------------ios------------------------
  const onChange = (e, selectedDate) => {
      setDate(moment(selectedDate));
      dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
  }
  const onCancelPress = () => {
    setDate(moment(defaultDate));
    setShow(false);
  }
  const onDonePress = () => {
    setShow(false);
  }
  //-------------------------------------------

  const onAndroidChange = (e, selectedDate) => {
    setShow(false);
    if (selectedDate) {
      setDate(moment(selectedDate));
      dateTime = moment(selectedDate).format("DD/MM/YYYY").toString();
      //props.onDateChange(selectedDate);
    }
  }

  const renderDatePicker = () => {
    return (
      <DateTimePicker
        timeZoneOffsetInMinutes={0}
        value={new Date(date)}
        mode="date"
        minimumDate={new Date(moment().subtract(1, 'month'))}
        maximumDate={new Date(moment())}
        onChange={Platform.OS === 'ios' ? onChange : onAndroidChange}
      />
    )
  }
  ---------------------------------------------------------------------------------------------------------*/
  return (
    <Screen style={styles.container}>

      <View style={{ alignItems: "center" }}>
        <Image
          style={styles.image}
          source={require("../assets/pluviometro.png")}
        />
        <Text style={{ fontSize: 18, fontWeight: "bold", color: "#1976D2" }}>
          Pluviômetro
        </Text>
      </View>
      <ScrollView style={styles.container}>
        <Form
          initialValues={{
            pluviometer: "",
            data: "",
            images: [],
          }}
          onSubmit={(values) => {
            insertPluviometerData({ ...values, dateTime, location });
            showMessage({
              message: "Informação enviada!",
              duration: 3000,
              icon: "success",
              type: "success",
            });
            props.navigation.goBack(null);
          }}
          validationSchema={validationSchema}
        >
          <View style={{ marginTop: 30, flex: 1 }}>
            <Text style={styles.labelStyle}>
              Quantidade de chuva:
            </Text>
            <View style={{ flex: 1, flexDirection: 'row' }}>
              <FormField
                keyboardType="number-pad"
                maxLength={200}
                name="pluviometer"
                placeholder="Digite a quantidade de chuva"
              />
            </View>
          </View>

          <View style={{ marginTop: 10, flex: 1, borderRadius: 25 }}>
            <Text style={styles.labelStyle}>
              Data da coleta:
            </Text>
            <View style={{ flex: 1, flexDirection: 'row' }}>
              <View style={{ flex: 1 }}>
                <FormField
                  keyboardType="numbers-and-punctuation"
                  maxLength={10}
                  name="data"
                  placeholder="dd/mm/aaaa"
                  values={dateTime}
                  flex={1}
                />
              </View>
                <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
            </View>
            {/*
            <TouchableOpacity style={styles.datepickerStyle}
              onPress={() => setShow(true)}>
              <View style={styles.datePickerView}>
                <View style={{ flexDirection: "row", justifyContent: "space-between", width: 280 }}>
                  <Text style={{ fontSize: 16, marginLeft: 15 }}>{date.format('DD/MM/YYYY')}</Text>
                  <FontAwesome5 style={styles.dateIcon} name="calendar-day" size={24} color="grey" />
                </View>
                {Platform.OS !== 'ios' && show && renderDatePicker()}
                {Platform.OS === 'ios' && show && (
                  <Modal
                    transparent={true}
                    animationType="slide"
                    visible={show}
                    supportedOrientations={['portrait']}
                    onRequestClose={() => setShow(false)}>
                    <View style={{ flex: 1 }}>
                      <TouchableHighlight
                        style={{
                          flex: 1,
                          alignItems: 'flex-end',
                          flexDirection: 'row',
                        }}
                        activeOpacity={1}
                        visible={show}
                        onPress={() => setShow(false)}>
                        <TouchableHighlight
                          underlayColor={'#f8f4f4'}
                          style={{
                            flex: 1,
                            borderTopColor: colors.primary,
                            borderTopWidth: 1,
                          }}
                          onPress={() => console.log('Datepicker press')}>
                          <View
                            style={{
                              backgroundColor: '#f8f8ff',
                              height: 256,
                              overflow: 'hidden',
                            }}>
                            <View style={{ marginTop: 20 }}>
                              {renderDatePicker()}
                            </View>
                            <TouchableHighlight
                              underlayColor={'transparent'}
                              onPress={onCancelPress}
                              style={(styles.btnText, styles.btnCancel)}>
                              <Text>Cancelar</Text>
                            </TouchableHighlight>

                            <TouchableHighlight
                              underlayColor={'transparent'}
                              onPress={onDonePress}
                              style={(styles.btnText, styles.btnDone)}>
                              <Text>Ok</Text>
                            </TouchableHighlight>
                          </View>
                        </TouchableHighlight>
                      </TouchableHighlight>
                    </View>
                  </Modal>
                )}
              </View>
            </TouchableOpacity>
           */}
          </View>
          <FormImagePicker
            backgroundColor="#1976D2"
            name="images"
            styles={{ width: 50 }}
          />
          <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
          <View style={{ flex: 1 }}>
          </View>
        </Form>
      </ScrollView>
    </Screen>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 10,
    flex: 1

  },
  image: {
    width: dims.width * 0.8,
    height: dims.height * 0.8,
    justifyContent: "center",
    alignItems: "center",
  },
  datePickerView: {
    width: 280,
    flexDirection: "row",
    justifyContent: "space-between",
    paddingVertical: 15,
  },
  datepickerStyle: {
    borderRadius: 25,
    width: 280,
    backgroundColor: "#f8f4f4",
  },
  dateIcon: {
    marginTop: 25,
    marginLeft: 15,
  },
  labelStyle: {
    fontSize: 16,
    fontWeight: "bold",
    textAlign: "left",
    color: "#1976D2",
    marginBottom: 5,
  },
  btnText: {
    position: "absolute",
    top: 0,
    height: 42,
    paddingHorizontal: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    color: colors.primary,
  },
  btnCancel: {
    left: 0,
  },
  btnDone: {
    right: 0,
  },
});

export default PluviometerSharingDataScreen;