import React, {ReactNode, useEffect, useState} from 'react';
import {getAllForms, getForm, getMyDocuments} from "../../../API/dynamic-forms";
import {dividerClasses} from "@mui/material";
import {CustomSelectOptions} from "../../../models/ReactComponents";
import NarrowContainer from "../Layout/NarrowContainer";
import './dynamic-forms.scss'
import FetchForm from "./FetchForm";

type DynamicFormsControllerProps = {
    children?: ReactNode

}

const DocumentsAdd = ({children}: DynamicFormsControllerProps) => {


    const [formsLookup, setFormsLookup] = useState<CustomSelectOptions>([])
    const [selectedForm, setSelectedForm] = useState('')


    useEffect(() => {
        (
            async () => {
                const res = await getAllForms()

                setFormsLookup(res.data)

            }
        )()
    }, [])

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

            {
                !selectedForm &&
                <div className={'forms-nav'}>
                    {
                        formsLookup && formsLookup.map(f =>
                            <div
                                onClick={() => setSelectedForm(f.value as string)}
                                className={`form-nav-item ${selectedForm == f.value && 'active'}`}>
                                {f.name}
                            </div>
                        )
                    }
                </div>
            }


            {
                selectedForm &&
                <FetchForm
                    formID={selectedForm}
                />
            }

        </div>
    );
}

export default DocumentsAdd;