WPD-MobileApp/src/app/components/forms/FormField.js

import React, { useState, useEffect } from "react";
import { useFormikContext } from "formik";

import TextInput from "../TextInput";
import ErrorMessage from "./ErrorMessage";
import { View, Text } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import colors from "../../config/colors";
import { Shadow } from "react-native-shadow-2";

function IncreaseDecreaseButtons({ content }) {
  return (
    <Shadow
      offset={[0, 3]}
      distance={3}
      radius={4}
      startColor="rgba(0, 0, 0, 0.15)"
      paintInside={true}
    >
      <View
        style={{
          backgroundColor: colors.primary,
          width: 35,
          height: 42,
          justifyContent: "center",
          alignItems: "center",
          borderRadius: 4,
        }}
      >
        <Text style={{ color: "white", fontSize: 24 }}>{content}</Text>
      </View>
    </Shadow>
  );
}

function RenderPluviometerInput({
  name,
  setFieldTouched,
  setFieldValue,
  otherProps,
  width,
  values,
}) {
  console.log(name == "pluviometer");
  const [fieldVal, setFieldVal] = useState(values[name]);

  useEffect(() => {
    setFieldValue(name, fieldVal, true);
  }, [fieldVal]);

  const increase = () => {
    setFieldVal((Number(fieldVal) + 1).toString());
  };

  const decrease = () => {
    setFieldVal((Number(fieldVal) - 1).toString());
  };

  return (
    <View
      style={{
      flexDirection: "row",
      }}
    >
      <View style={{flex: 1,alignSelf: "stretch"}}>
      <TextInput
        onBlur={() => setFieldTouched(name)}
        onChangeText={(val) => {
          setFieldVal(val);
        }}
        width={width}
        value={fieldVal.toString()}
        {...otherProps}/>
      </View>

      <TouchableOpacity
        onPress={() => {
          decrease();
        }}
        style={{
          paddingLeft: 4,
          paddingBottom: 8,
          paddingRight: 1.5,
        }}
      >
        <IncreaseDecreaseButtons content={"-"} />
      </TouchableOpacity>

      <TouchableOpacity
        onPress={() => {
          increase();
        }}
        style={{
          paddingLeft: 1.5,
          paddingBottom: 8,
          paddingRight: 16,
        }}
      >
        <IncreaseDecreaseButtons content={"+"} />
      </TouchableOpacity>
    </View>
  );
}

function AppFormField({
  name,
  width,
  increaseDecreaseButtons = false,
  flex = 0,
  paddingLeft = 16,
  paddingRight = 16,
  ...otherProps
}) {
  const {
    values,
    setFieldTouched,
    setFieldValue,
    handleChange,
    errors,
    touched,
  } = useFormikContext();

  return (
    <View flex={flex}>
      <View
        style={{
          paddingLeft: paddingLeft,
          paddingRight: increaseDecreaseButtons ? 0 : paddingRight,
        }}
      >
          {name != "pluviometer" ? (
            <TextInput
              onBlur={() => setFieldTouched(name)}
              onChangeText={handleChange(name)}
              width={width}
              {...otherProps}
            />
          ) : (
            <RenderPluviometerInput
              name={name}
              setFieldTouched={setFieldTouched}
              setFieldValue={setFieldValue}
              otherProps={otherProps}
              width={width}
              values={values}
            />
          )}
      </View>

        <View style={{ paddingHorizontal: 16}}>
          <ErrorMessage error={errors[name]} visible={touched[name]} />
        </View>
    </View>
  );
}

export default AppFormField;