import React, { Component } from 'react';
import axios from 'axios';
//import swal from 'sweetalert';
import { Link } from "react-router-dom";
import swal from "sweetalert";

export default class Automatic_question extends Component {
    constructor(props){
        super(props);

        this.onChangeLessonNo = this.onChangeLessonNo.bind(this);
        this.onChangeLessonName = this.onChangeLessonName.bind(this);
        this.onChangeDefultMark = this.onChangeDefultMark.bind(this);
        this.onChangeFeedBack = this.onChangeFeedBack.bind(this);

        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            lesson_no : '',
            lesson_name : '',
            defult_mark : '',
            general_feedback : '',
        }
    }

    onChangeLessonNo(e){
        this.setState({
            lesson_no :e.target.value
        });
    }

    onChangeLessonName(e){
        this.setState({
            lesson_name :e.target.value
        });
    }

    onChangeDefultMark(e){
        this.setState({
            defult_mark :e.target.value
        });
    }

    onChangeFeedBack(e){
        this.setState({
            general_feedback :e.target.value
        });
    }


    async onSubmit(e) {
        e.preventDefault();
        //if(this.state.item_name != null && this.state.item_description != null && this.state.item_category != null && this.state.item_quantity != null && this.state.item_price){

        console.log(`Form submitted:`);
        console.log(`Lesson Name: ${this.state.lesson_name}`);
        console.log(`Lesson No: ${this.state.lesson_no}`);
        console.log(`Defualt mark: ${this.state.defult_mark}`);
        console.log(`Genaral Feedback: ${this.state.general_feedback}`);

        const newQuestion = {
            lesson_no: this.state.lesson_no,
            lesson_name: this.state.lesson_name,
            defult_mark: this.state.defult_mark,
            general_feedback: this.state.general_feedback,
        };

        let options = {
            uri: 'http://127.0.0.1:5000/generate',
            body: JSON.stringify(newQuestion),
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        }

        let response = await axios.post(options.uri, options.body);
        console.log(response.data.result);
        // axios.post('http://127.0.0.1:5000/generate')
        //     .then(res => {this.setState({
        //         question_id: res.data.question_id})
        //     })
        //     .catch(//swal("Good job!", "You clicked the button!", "warning"
        //     );
        // swal("Data Saved Successfully!", "Your Details has been Saved Successfully!", "success");

    }

    render() {
        return (
            <div className="container">
                <form onSubmit={this.onSubmit}>
                        <div className="row">
                            <div className="col-sm-5">
                                <label>Lesson no: </label>
                                <div style={{padding: '0px'}}>
                                    <input type="text" required
                                           className="form-control"
                                           value={this.state.lesson_no}
                                           onChange={this.onChangeLessonNo}
                                           />
                                </div>
                            </div>

                            <div className="col-sm-5">
                                <label>Lesson name: </label>
                                <div style={{padding: '0px'}}>
                                    <input type="text" required
                                           className="form-control"
                                           value={this.state.lesson_name}
                                           onChange={this.onChangeLessonName}
                                    />
                                </div>
                            </div>

                            <div className="col-sm-5">
                                <label>defult_mark: </label>
                                <div style={{padding: '0px'}}>
                                    <input type="text" required
                                           className="form-control"
                                           value={this.state.defult_mark}
                                           onChange={this.onChangeDefultMark}
                                    />
                                </div>
                            </div>

                            <div className="col-sm-5">
                                <label>general_feedback: </label>
                                <div style={{padding: '0px'}}>
                                    <input type="text" required
                                           className="form-control"
                                           value={this.state.general_feedback}
                                           onChange={this.onChangeFeedBack}
                                    />
                                </div>
                            </div>


                        </div>

                        <div className="row">
                            <div className="col-sm-10">
                                <label style={{textAlign: 'left'}} >Question text: </label>
                                <textarea
                                    className="form-control" required
                                />

                                <br/>
                                <button className="btn btn-block btn btn-secondary" type="submit" value="Submit" style={{ color: "white" }}>Create New Quiz</button>


                            </div>

                        </div>

                </form>
                    </div>

        )
    }
}