/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { useState, useEffect } from "react";
import ReactLoading from "react-loading";
import Formsy from "formsy-react";
import { Amplify, API } from "aws-amplify";
import OCVForm from "./OCVForm";
export default function FormWrapper({
viewData,
formID,
//link,
headerText,
submissionText,
anchorID,
}) {
const [activePage, setActivePage] = useState(0);
const [state, setState] = useState({});
const [formData, setFormData] = useState(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const [isSubmitted, setIsSubmitted] = useState(false);
const disableButton = () => {
setState({ ...state, canSubmit: false });
};
const enableButton = () => {
setState({ ...state, canSubmit: true });
};
Amplify.configure({
API: {
endpoints: [
{
name: "ocvapps",
endpoint:
"https://oc1rhn99vi.execute-api.us-east-1.amazonaws.com/beta",
region: "us-east-1",
},
],
},
});
const submit = (model) => {
setIsSubmitting(true);
API.post("ocvapps", "/form/submission", {
body: {
appID: formData.appID,
data: {
formID,
formData: model,
},
},
headers: {
"x-api-key": "AJgsD4mQAY95dQiaJecac3WBvEFlqnvn3vAxI93f",
"Content-Type": "application/json",
},
})
.then((response) => {
if (response?.response?.statusCode === 200) {
setIsSubmitting(false);
setIsSubmitted(true);
} else {
setIsSubmitting(false);
setIsSubmitted(false);
alert(
"There has been a problem with your form submission. Contact the Web Administrator for help."
);
}
})
.catch((error) => {
setIsSubmitting(false);
setIsSubmitted(false);
alert(error);
});
};
// retrieve formData
useEffect(() => {
const form = {
version: 3,
images: 1,
formManager: 0,
title: "Multi Page Test",
sendServer: 1,
active: 1,
autoLocation: 1,
saveToGallery: 1,
saveUserInfo: ["userName", "userEmail", "userPhone"],
fromAddress: "noreply@myocv.com",
subject: "Damage Report App submission",
message: "A Damage Report has been submitted through the app.",
emails: [
{
email: "changeme@example.com",
name: "changeme",
},
],
inactiveMessage:
"This form is currently inactive please check back later.",
sections: [
[
{
title: "Report Type",
fields: [
{
fieldID: "reportType",
type: 4,
optional: 0,
subtype: 0,
multi: 0,
title: "Type",
length: 0,
elements: [
"Severe Weather",
"Storm Damage",
"Power Outage",
"Other",
],
},
{
fieldID: "reportType",
type: 9,
optional: 0,
subtype: 0,
multi: 0,
title: "Location",
},
],
},
{
title: "Personal Details",
fields: [
{
fieldID: "userName",
type: 0,
optional: 1,
subtype: 0,
multi: 0,
title: "Name (optional)",
length: 0,
},
{
fieldID: "userEmail",
type: 0,
optional: 1,
subtype: 1,
multi: 0,
title: "Email Address (optional)",
length: 0,
},
{
fieldID: "userPhone",
type: 0,
optional: 1,
subtype: 3,
multi: 0,
title: "Phone Number (optional)",
length: 0,
},
],
},
],
[
{
title: "Report Details",
fields: [
{
fieldID: "address",
type: 0,
optional: 0,
subtype: 0,
multi: 0,
title: "Address",
length: 0,
},
{
fieldID: "city",
type: 0,
optional: 0,
subtype: 0,
multi: 0,
title: "City",
length: 0,
},
{
fieldID: "state",
type: 0,
optional: 0,
subtype: 0,
multi: 0,
title: "State",
length: 0,
},
{
fieldID: "zipCode",
type: 0,
optional: 0,
subtype: 7,
multi: 0,
title: "ZIP Code",
length: 0,
},
{
fieldID: "dateTimeOfIncident",
type: 7,
optional: 0,
subtype: 0,
multi: 0,
title: "Date/Time of Incident",
length: 0,
},
{
length: 0,
fieldID: "additionalInfo",
type: 1,
optional: 1,
subtype: 0,
multi: 0,
title: "Additional Information (optional)",
},
],
},
],
],
alert911: 0,
alertText: "",
leaderText: "",
footerText: "",
appID: "a12722222",
};
async function getFormData() {
try {
//const response = await axios.get(link);
setFormData(form);
} catch (error) {
console.error(error);
}
}
getFormData();
}, []);
if (formData === null) {
return (
<div className="OCVFormDiv">
<ReactLoading
className="loading-centered"
type="spinningBubbles"
color="#105c9c"
height="10%"
width="10%"
/>
</div>
);
}
return (
<Formsy
onValidSubmit={submit}
onValid={enableButton}
onInvalid={disableButton}
>
<OCVForm
isSubmitted={isSubmitted}
isSubmitting={isSubmitting}
disableButton={disableButton}
enableButton={enableButton}
formData={formData}
formID={formID}
headerText={headerText}
submissionText={submissionText}
anchorID={anchorID}
viewData={viewData}
state={state}
setState={setState}
activePage={activePage}
setActivePage={setActivePage}
/>
</Formsy>
);
}
