import React, { FC, MouseEventHandler, useState } from "react";
import Button from "../Button";
import Avatar from "../Avatar"
import FormInputs from "../../types/FormInputs";
import TextField from "../TextField";

export type ModalFormProps = {
    image?: Boolean,
    title?: string,
    sectionData?: FormInputs          // En caso de formulario con secciones, se recibiran las preguntas poniendo una en cada fila y las opciones en las columnas
    formData?: FormInputs[]            // Array de objetos original donde se guarda toda la informacion de un formulario
    formDataIndex?: number 
    errors:any
    handleOnChange?: React.Dispatch<React.SetStateAction<FormInputs[]>>
    onAccept?: MouseEventHandler<HTMLButtonElement> | undefined

}


const ModalForm: FC<ModalFormProps> = (props) => {

    let { title, formData, handleOnChange, onAccept, formDataIndex , errors} = props

    const [patientFile, setPatientFile] = useState({ image: "" })

    function handleImgChange(base64: string): void {
        setPatientFile({ ...patientFile, image: base64 });
    }

    function handleChange(e: { target: HTMLInputElement }): void {

        const { name, value, tabIndex } = e.target;
        
        let newArr = formData?formData : []
        
        newArr[tabIndex] = { ...newArr[tabIndex], [name]: value } ;

        if(handleOnChange)handleOnChange(newArr);
        
        
    }
   
    return (
        <div key={formDataIndex}>
            <div className="c-modal__header">
                <h5  style={{margin: 0}}>
                    {title}
                </h5>
            </div>
            <div className="c-modal__content cols-grid grid-img">
                    <Avatar
                        key={"Avatar"}
                        id='patient-image'
                        value={patientFile.image}
                        onChange={handleImgChange}
                    />
               
                    <div className="cols-grid">
                    {
                        
                        formData?.map((label, masterIndex) => {
                            
                                    return (
                                        <div key={Math.random().toString(36).substr(2, 9) }>
                                        <h3>{label.header} </h3>
                                    <div className={
                                        ((Object.keys(label).length - 1)===6)?"cols-grid grid-3":
                                        ((Object.keys(label).length - 1)===5)?"cols-grid grid-5":
                                        ((Object.keys(label).length - 1)===4)?"cols-grid grid-4":
                                        "cols-grid grid-3"
                                        }
                                        style={{marginBottom:"10px"}}>
                                        {Object.keys(label).map((section, index) => {
                                            if (section !== "header") {
                                                // @ts-ignore
                                                let dataType = label[section]['type']
                                                // @ts-ignore
                                                let dataOptions = label[section]['options']
                                                // @ts-ignore
                                                let fieldError = errors[0][label[section]['id']]
                                                return (

                                                        <TextField 
                                                        style={{ marginRight:"50px"}}
                                                        keyform={`${index}`}
                                                        className="field input"
                                                        label={section} 
                                                        name={section}  
                                                        placeholder={section}
                                                        options={dataOptions}
                                                        inputType={dataType}
                                                        type={dataType}
                                                        error={fieldError}
                                                        key={Math.random().toString(36).substr(2, 9) }
                                                        onChange={handleChange}/>
                                                )
                                            } else {
                                                return ""
                                            }
                                        }
                                        )}
                                    </div>
                                    </div>
                                )
                            }
                            
                        )
                    }
                    <div style={{marginTop:"15px"}}>
                    <Button  onClick={onAccept} label={"ACEPTAR"}></Button>
                    </div>
                    </div>
                    
                    

            </div>
            

        </div>


    );
}

export default ModalForm;