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

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

import ErrorMessage from "./ErrorMessage";
import ImageInputList from "../ImageInputList";
import { View, Text, StyleSheet, Modal, Alert } from "react-native";
import colors from "../../config/colors";
import { dimensions } from "../../config/dimensions";

function FormImagePicker({ name }) {
  const { errors, setFieldValue, touched, values } = useFormikContext();
  const imageUris = values[name];
  const [modalVisible, setModalVisible] = useState(false);

  const handleAdd = (uri) => {
    if (imageUris.length === 0) {
      setFieldValue(name, [uri]);
    } else {
      createTwoButtonAlert(uri);
    }
  };

  const createTwoButtonAlert = (uri) =>
    Alert.alert(
      "Substituir imagem?",
      "É possível enviar apenas uma imagem",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () =>  setFieldValue(name, [uri])}
      ],
      { cancelable: false }
    );


  const handleRemove = (uri) => {
    setFieldValue(
      name,
      imageUris.filter((imageUri) => imageUri !== uri)
    );
  };

  return (
    <View>
      <ImageInputList
        imageUris={imageUris}
        onAddImage={handleAdd}
        onRemoveImage={handleRemove}
      />
      <ErrorMessage error={errors[name]} visible={touched[name]} />
    </View>
  );
}

const styles = StyleSheet.create({
  labelStyle: {
    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
    color: colors.primary,
    marginBottom: 5,
    marginTop: 15,
  },
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
  },
});



export default FormImagePicker;