import React, {useState} from 'react'
import {Button, Col, Container, Form, ListGroup, ListGroupItem, Modal, Row} from "react-bootstrap";
import ConfigroInput from "../types/ConfigroInput";
import ConfigroButton from "../types/ConfigroButton";
import FormBuilder from "./FormBuilder";

interface ModalProps {
    title: string
    show: boolean
    handleClose: () => void
    handleSave: (inputData: ConfigroInput) => void
    inputType: string
}

const InputGeneratorModal: React.FunctionComponent<ModalProps> = (props: ModalProps) => {

    const [formData, setFormData] = useState<ConfigroInput>({
        typeOf: "ConfigroInput",
        label: "",
        type: "",
        placeholder: ""
    })
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setFormData({...formData, [e.currentTarget.name]: e.currentTarget.value})
    }

    const handleSave = () => {
        props.handleSave({...formData, type: props.inputType});
        setFormData({
            typeOf: "ConfigroInput",
            label: "",
            type: "",
            placeholder: ""
        })
    }

    return <Modal show={props.show} onHide={props.handleClose}>
        <Modal.Header closeButton>
            <Modal.Title>{props.title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
            <Form>
                <Form.Group>
                    <Form.Label>Input Label</Form.Label>
                    <Form.Control name={"label"} value={formData.label}
                                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange(e)}/>
                </Form.Group>
                <Form.Group>
                    <Form.Label>Input Placeholder</Form.Label>
                    <Form.Control name={"placeholder"} value={formData.placeholder}
                                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange(e)}/>
                </Form.Group>
            </Form>
        </Modal.Body>
        <Modal.Footer>
            <Button variant="secondary" onClick={props.handleClose}>
                Close
            </Button>
            <Button variant="primary" onClick={handleSave}>
                Save
            </Button>
        </Modal.Footer>
    </Modal>
}

interface State {
    data: Array<ConfigroInput | ConfigroButton>
    show: boolean
    modalTitle: string
    inputType: string
}

class FormGenerator extends React.Component<any, State> {

    state: State = {
        show: false,
        data: [],
        modalTitle: "",
        inputType: ""
        // input: {label: "", placeholder: "", type: "", typeOf: "ConfigroInput"}
    }

    handleClose = () => this.setState({show: false})
    openInputModal = (modalTitle:string, inputType: string) => this.setState({
        show: true,
        modalTitle: modalTitle,
        inputType: inputType
    });
    handleSave = (inputData: ConfigroInput) => this.setState({data: [...this.state.data, inputData], show: false})


    render() {
        return <Container>
            <InputGeneratorModal title={this.state.modalTitle}
                                 show={this.state.show}
                                 inputType={this.state.inputType}
                                 handleSave={this.handleSave}
                                 handleClose={this.handleClose}/>
            <Row>
                <Col>
                    <ListGroup>
                        <ListGroupItem>
                            <Button variant={"link"}
                                    onClick={() => this.openInputModal("Add Text Input", "text")}
                                    style={{border: "1px solid dashed"}} >Text</Button>
                        </ListGroupItem>
                        <ListGroupItem>
                            <Button variant={"link"}
                                    onClick={() => this.openInputModal("Add Email Input", "email")}
                                    style={{border: "1px solid dashed"}}>Email</Button>
                        </ListGroupItem>
                    </ListGroup>
                </Col>
                <Col>
                    <FormBuilder data={this.state.data} onFormSubmit={(formData) => console.log(formData) } />
                </Col>
            </Row>

        </Container>
    }
}

export default FormGenerator;