import React, {ReactNode, useEffect, useState} from 'react';
import {getAllForms, getForm} from "../../../API/dynamic-forms";
import DynamicFormViewer from "./DynamicFormViewer";
import {DynamicFormInterface, JsonForm} from "../../../models/JsonForms";
import {FORM_RULES} from "../../../hooks/useValidateForm";

type FetchFormProps = {
    children?: ReactNode
    formID: string
}


const FetchForm = ({formID}: FetchFormProps) => {

    // const [formSlug, setFormSlug] = useState('')
    // const [jsonForm, setJsonForm] = useState({})
    //
    const [form, setForm] = useState<DynamicFormInterface>()
    const [formData, setFormData] = useState({})
    const [pdf, setPdf] = useState('')

    useEffect(() => {

        (async () => {

            const res2 = await getAllForms()

            const res = await getForm(formID)

            setForm(res.data.form)
            setFormData(res.data.form_data)


        })()

    }, [])

    return (
        <div>
            {
                form &&
                <DynamicFormViewer
                    form={form}
                    formDataI={formData}

                />
            }

        </div>
    );
}

export default FetchForm;