const e = React.createElement;

export default class FormsPage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            textInput: "",
            select: "",
            multiSelect: "",
            textarea: ""
        };

        this.handleTextInput = (evt) => {
            evt.preventDefault();

            this.setState({
                textInput: evt.target.value
            });
        };

        this.handleSelect = (evt) => {
            evt.preventDefault();

            this.setState({
                select: evt.target.value
            });
        };

        this.handleMultiSelect = (evt) => {
            evt.preventDefault();

            this.setState({
                multiSelect: Array.prototype.map.call(evt.target.selectedOptions, i => i.value).join(", ")
            });
        };

        this.handleTtextarea = (evt) => {
            evt.preventDefault();

            this.setState({
                textarea: evt.target.value
            });
        }
    }

    render() {
        return e("form", { id: "page-form" }, [
            e("div", { className: "form-group" }, [
                e("label", null, "Text input"),
                e("input", {
                    id: "text_input",
                    type: "text",
                    className: "form-control",
                    onChange: this.handleTextInput
                }),
                e("small", {
                    id: "text_output",
                    className: "form-text text-muted"
                },
                    this.state.textInput
                )
            ]),
            e("div", { className: "form-group" }, [
                e("label", null, "Select"),
                e("select", {
                    id: "select_input",
                    className: "form-control",
                    onChange: this.handleSelect
                    },
                    [
                        e("option", null, 1),
                        e("option", null, 2),
                        e("option", null, 3),
                        e("option", null, 4),
                        e("option", null, 5),
                    ]
                ),
                e("small", {
                        id: "select_output",
                        className: "form-text text-muted"
                    }, this.state.select
                )
            ]),
            e("div", { className: "form-group" }, [
                e("label", null, "Multi select"),
                e("select", {
                        id: "multi_select_input",
                        multiple: true,
                        className: "form-control",
                        onChange: this.handleMultiSelect
                    },
                    [
                        e("option", null, 1),
                        e("option", null, 2),
                        e("option", null, 3),
                        e("option", null, 4),
                        e("option", null, 5),
                    ]
                ),
                e("small", {
                        id: "multi_select_output",
                        className: "form-text text-muted"
                    }, this.state.multiSelect
                )
            ]),
            e("div", { className: "form-group" }, [
                e("label", null, "Textarea"),
                e("textarea", {
                        id: "textarea_input",
                        rows:"5",
                        className: "form-control",
                        onChange: this.handleTtextarea
                    }
                ),
                e("small", {
                        id: "textarea_output",
                        className: "form-text text-muted"
                    }, this.state.textarea
                )
            ]),
        ])
    }
}