import React, {ReactNode, useEffect, useState} from 'react';
import {CustomSelectOptions} from "../../../models/ReactComponents";
import {getAllForms, getDocument, getForm} from "../../../API/dynamic-forms";
import FetchForm from "./FetchForm";
import {DynamicFormInterface, getFormRes, JsonForm} from "../../../models/JsonForms";
import DynamicFormViewer from "./DynamicFormViewer";
import {useParams} from "react-router-dom";
import {FORM_RULES} from "../../../hooks/useValidateForm";

type DocumentEditProps = {
    children?: ReactNode
}


const DocumentsEdit = ({children}: DocumentEditProps) => {

    const {doc_id} = useParams();

    const [doc, setDoc] = useState<getFormRes>()

    useEffect(() => {

        (
            async () => {

                if(!doc_id) return
                const res = await getDocument(doc_id)
                setDoc(res.data)


            }
        )()


    }, [])

    return (
        <div className={'dynamic-forms-controller'}>

            {
                doc &&
                <DynamicFormViewer
                    // @ts-ignore
                    form={doc.form}
                    // @ts-ignore
                    formDataI={doc.form_data}
                    mode={'edit'}
                    doc_id={doc_id}

                />
            }

        </div>
    );
}

export default DocumentsEdit;