import React, { useEffect, useState } from "react";
// import {
//     Row,
//     Card,
//     CardBody,
//     Badge,
//     Input,
//     CardTitle,
//     FormGroup,
//     Label,
//     CustomInput,
//     Button,
//     FormText,
//     CardHeader,
//     Nav,
//     NavItem,
//     TabContent,
//     TabPane
// } from "reactstrap";
// // import { Colxx } from "../common/CustomBootstrap";
// import { Formik, Form, Field, FormikActions } from "formik";
// import * as Yup from "yup";
// import {
//     FormikReactSelect,
//     FormikTagsInput,
//     FormikDatePicker
// }
//     from "../../../../containers/form-validations/FormikFields";
// import { Colxx } from "../../../../components/common/CustomBootstrap";


// class DynamicForm {
//     submitEvent: Function;
//     // fieldList: Array<object>;

//     constructor(submitEvent: Function) {
//         this.submitEvent = submitEvent;
//     }

//     // buildValidationObject() {
//     //     if (this.fieldList) {
//     //         // let entries = ;
//     //         this.fieldList.forEach(field => {
//     //             // const map = new Map(Object.entries(field))
//     //             Object.entries(field).forEach(([key, value]) => console.log(key));
//     //             // console.log(map);
//     //         });
//     //     }
//     // }

//     // buildFormObject() {
//     //     if (this.fieldList) {
//     //         let formInputs;
//     //         // formInputs = 
//     //         this.fieldList.forEach(field => {
//     //             Object.entries(field).forEach(
//     //                 ([key, value]) => {
//     //                     console.log("key:", key, "value:", value);
//     //                     // return (

//     //                     // )
//     //                 });

//     //         });
//     //     }
//     // }

//     // handleSubmit(e: object) {
//     //     console.log(e);
//     // }

//     handleSubmit(values: any) {
//         const payload = {
//             ...values
//         };

//         //TODO - move this to parent container
//         setTimeout(() => {
//             console.log(JSON.stringify(payload, null, 2));
//             alert("Successfully Submitted Form :)");
//             // this.submitEvent();
//             // setSubmitting(false);
//         }, 1000);
//     };


//     /*
//     IMPORTANT: If onSubmit is async, then Formik will automatically set isSubmitting to false on your behalf once it has resolved. 
//     This means you do NOT need to call formikBag.setSubmitting(false) manually.
//     However, if your onSubmit function is synchronous, then you need to call setSubmitting(false) on your own.
//     */
//     outputForm() {
//         return (
//             <>
//                 <Formik
//                     initialValues={{
//                         textField: ""
//                     }}
//                     validationSchema={
//                         Yup.object().shape({
//                             textField: Yup.string()
//                                 .required("Text Field is required!")
//                         })
//                     }
//                     onSubmit={this.handleSubmit} //Figure out how to call the submit function passed in 
//                 >
//                     {({
//                         handleSubmit,
//                         setFieldValue,
//                         setFieldTouched,
//                         handleChange,
//                         handleBlur,
//                         values,
//                         errors,
//                         touched,
//                         isSubmitting
//                     }) => (
//                             <Form className="av-tooltip tooltip-label-right">
//                                 <Row>
//                                     <Colxx md="4">
//                                         <FormGroup className="form-group has-float-label">
//                                             <Label>Text Field</Label>
//                                             <Field
//                                                 className="form-control"
//                                                 value={values.textField}
//                                                 name="textField"
//                                             />
//                                             {errors.textField && touched.textField ? (
//                                                 <div className="invalid-feedback d-block">
//                                                     {errors.textField}
//                                                 </div>
//                                             ) : null}
//                                         </FormGroup>
//                                     </Colxx>
//                                 </Row>
//                                 <div className="d-flex flex-row-reverse">
//                                     <Button className="mb-2 btn-sm" color="primary" type="submit">Submit</Button>
//                                 </div>
//                             </Form>
//                         )}
//                 </Formik>
//             </>
//         )
//     }
// }

// const fieldList = [
//     {
//         id: 'aosdjas',
//         name: "firstName",
//         label: "First Name",
//         value: "",
//         type: "LONG_STRING",
//     }
// ];

// type CustomProps = {
//     submitEvent: Function,
//     // paragraph: string
// }

function DynamicFormComponent() {
    return (
        <div>Dynamic Form Control</div>
    )
}

// export const DynamicFormComponent = ({ submitEvent }: CustomProps) => {

//     // const [greeting, setGreeting] = useState("");
//     const formBuilder = new DynamicForm(submitEvent);
//     const form = formBuilder.outputForm();
//     // function buildForm(){
//     //     let formBuilder = ;
//     //     // formBuilder.buildValidationObject();
//     //     formBuilder.outputForm();
//     // }



//     // useEffect(() => {


//     // setGreeting(greeter.greet());
//     // })

//     // let greeter = new Greeter("Alex Kedian");

//     // if (greeter) {
//     //     
//     // }

//     return (
//         <>
//             {form}
//         </>
//     )
// }



// {/* <h1>Formik Dynamic Form</h1> */ }
// //         <Formik
// //             initialValues={initialValues
// //                 // {
// //                 // name: "Jaco",
// //                 // fullName: "Jacob Johannes",
// //                 // surname: "Laubscher",
// //                 // title: { value: "MR", label: "Mr." },
// //                 // countryOfNationality: { value: "ZA", label: "South Africa" },
// //                 // countryOfBirth: { value: "ZA", label: "South Africa" },
// //                 // cityOfBirth: { value: "CPT", label: "Cape Town" },
// //                 // ethnicity: { value: "WA", label: "White"},
// //                 // gender: { value: "M", label: "Male"},
// //                 // disabled: { value: "N", label: "No"},
// //                 // additionalNeeds: { value: "N", label: "No"},
// //                 // sportSafetyNumber: "BS-000347",
// //                 // height: "176cm",
// //                 // weight: "86kg"
// //                 // }
// //             }
// //             validationSchema={object().shape({
// //                 name: string().required("Name is required"),
// //             })}
// //             onSubmit={handleSubmit}
// //             // onSubmit={(values) => console.log(values)}
// //             >
// //             {({
// //                 handleSubmit,
// //                 setFieldValue,
// //                 setFieldTouched,
// //                 handleChange,
// //                 handleBlur,
// //                 values,
// //                 errors,
// //                 touched,
// //                 isSubmitting
// //             }) => (
// //                 <Form className="av-tooltip tooltip-label-right">
// //                     <Row>
// //                         <Colxx md="3">
// //                             <FormGroup disabled={true} className="form-group has-float-label">
// //                                 <Label>Name</Label>
// //                                 <FormikReactSelect
// //                                 name="name"
// //                                 id="name"
// //                                 value={values.name}
// //                                 options={dropdownValues}
// //                                 onChange={setFieldValue}
// //                                 onBlur={setFieldTouched}
// //                                 />
// //                                 {errors.name && touched.name ? (
// //                                 <div className="invalid-feedback d-block">
// //                                     {errors.name}
// //                                 </div>
// //                                 ) : null}
// //                             </FormGroup>
// //                         </Colxx>
// //                     </Row>
// //                     <div className="d-flex flex-row-reverse">
// //                         <Button className="mb-2 btn-sm" color="primary" type="submit">Submit</Button>
// //                     </div>
// //                 </Form>
// //             )}
// //         </Formik>
// //     </>
// // );

export default DynamicFormComponent;