import React, {FormEvent} from "react";
import ConfigroInput from "../types/ConfigroInput";
import {Form} from "react-bootstrap";

class InputBuilder extends React.Component<ConfigroInput, { value: string }> {

    state: { value: string; } = {
        value: ""
    };

    handleChange = (e: FormEvent<HTMLInputElement>) => {
        this.setState({value: e.currentTarget.value})
    };

    render() {
        const input = {...this.props};
        return <>
            <Form.Label>{input.label}</Form.Label>
            <Form.Control type={input.type} placeholder={input.placeholder} value={this.state.value}
                          name={this.buildName(input.label)}
                          onChange={(e: FormEvent<HTMLInputElement>) => this.handleChange(e)}/>
        </>
    }

    private buildName(label: string) {
        let name = "input"
        let parts = label.split(" ")
        for (let index = 0; index < parts.length; index++) {
            name += parts[index][0].toUpperCase() + parts[index].substr(1).toLowerCase()
        }
        return name;
    }
}

export default InputBuilder