import React, {FormEvent} from 'react'
import {Form} from "react-bootstrap";
import ConfigroInput from "../types/ConfigroInput";
import ConfigroButton from "../types/ConfigroButton";
import ButtonBuilder from "../component/ButtonBuilder";
import InputBuilder from "../component/InputBuilder";

class Builder extends React.Component<ConfigroInput | ConfigroButton, any> {

    render() {
        let output;
        const formInput = {...this.props};
        switch (formInput.typeOf) {
            case "ConfigroButton":
                output = <ButtonBuilder {...formInput} />;
                break
            case "ConfigroInput":
                output = <InputBuilder {...formInput} />;
                break
        }

        return output
    }
}

interface FormBuilderProps {
    data: Array<ConfigroButton | ConfigroInput>
    onFormSubmit: (formData: Map<string, string | number>) => void
}

class FormBuilder extends React.Component<FormBuilderProps, any> {

    handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();

        let formData: Map<string, string | number> = new Map();
        let formElements = event.currentTarget.elements;

        for (let index = 0; index < formElements.length; index++) {
            let item = formElements.item(index)! as HTMLInputElement;
            if (item.getAttribute("name") !== null)
                formData.set(String(item.getAttribute("name")), item.value);
        }

        this.props.onFormSubmit(formData);
    };

    render() {
        let formInputs = this.props.data.map((input, index) => {
            return <Form.Group key={index}>
                <Builder key={index} {...input} />
            </Form.Group>;
        });

        return <Form onSubmit={this.handleFormSubmit}>
            {formInputs}
        </Form>;
    }
}

export default FormBuilder;