/* 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>
  );
}