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


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

        this.onChangeLessonNo = this.onChangeLessonNo.bind(this);
        this.onChangeLessonName = this.onChangeLessonName.bind(this);
        this.onChangeQuestionText = this.onChangeQuestionText.bind(this);
        this.onChangeQuestionAnswer = this.onChangeQuestionAnswer.bind(this);
        this.onChangeDefultMark = this.onChangeDefultMark.bind(this);
        this.onChangeGeneralFeedback = this.onChangeGeneralFeedback.bind(this);

        this.addQuestion = this.addQuestion.bind(this);
        this.editQuestion = this.editQuestion.bind(this);

        this.state = {
            question_id : '',
            lesson_no : '',
            lesson_name : '',
            question_text : '',
            question_answer : '',
            defult_mark : '',
            general_feedback : '',
            submitStatus : false,
            currentTime: Date.now(),
            editItem : false
        }
    }




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

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

    onChangeQuestionText(e){
        this.setState({
            question_text :e.target.value
        });
    }

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

    onChangeQType(e){
        this.setState({
            q_type :e.target.value
        });
    }

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

    onChangeQuestionAnswer(e){
        this.setState({
            question_answer :e.target.value
        });
    }


    addQuestion(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(`Category: ${this.state.category}`);
        console.log(`Name: ${this.state.name}`);
        console.log(`Question Text: ${this.state.question_text}`);
        console.log(`Defualt mark: ${this.state.defult_mark}`);
        console.log(`Question type: ${this.state.q_type}`);
        console.log(`Genaral Feedback: ${this.state.general_feedback}`);
     

        const newQuestion = {
            lesson_no : this.state.lesson_no,
            lesson_name : this.state.lesson_name,
            question_text : this.state.question_text,
            question_answer : this.state.question_answer,
            defult_mark : this.state.defult_mark,
            time_createdby: this.state.currentTime,
            time_modifiedby: this.state.currentTime,
            general_feedback : this.state.general_feedback,
        };

        axios.post('http://localhost:5000/questions/add',newQuestion)
            .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");

    }


    componentDidMount() {
        if(this.props.match.params.id != null){
            axios.get('http://localhost:5000/questions/'+ this.props.match.params.id)
                .then(response =>{
                    this.setState({
                        lesson_no : response.data.lesson_no,
                        lesson_name : response.data.lesson_name,
                        question_text : response.data.question_text,
                        question_answer : response.data.question_answer,
                        defult_mark : response.data.defult_mark,
                        q_type : response.data.q_type,
                        time_createdby: response.data.currentTime,
                        time_modifiedby: response.data.currentTime,
                        general_feedback : response.data.general_feedback,
                        submitStatus : true,
                       

                    })
                })
                .catch(function (error) {
                    console.log(error)
                })
        }else{
            this.setState({
                submitStatus : false
            });
        }
    }
    

    editQuestion(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){
        if(this.props.match.params.id != null){
            console.log(`Form Update submitted:`);
            console.log(`Category: ${this.state.category}`);
            console.log(`Name: ${this.state.name}`);
            console.log(`Question Text: ${this.state.question_text}`);
            console.log(`Defualt mark: ${this.state.defult_mark}`);
            console.log(`Question type: ${this.state.q_type}`);
            console.log(`Genaral Feedback: ${this.state.general_feedback}`);

            const editQuestion = {
                    lesson_no : this.state.lesson_no,
                    lesson_name : this.state.lesson_name,
                    question_text : this.state.question_text,
                    question_answer : this.state.question_answer,
                    defult_mark : this.state.defult_mark,
                    time_modifiedby: this.state.currentTime,
                    general_feedback : this.state.general_feedback,
            };

        // axios.post('https://senosaonlineshoppingwebsite.herokuapp.com/products/update/'+this.props.match.params.id,editItem)
        //     .then(res => console.log(res.data))
        //     .catch(swal("Good job!", "You clicked the button!", "warning"));

        axios.post('http://localhost:5000/questions/update/' + this.props.match.params.id, editQuestion)
            .then(res => console.log(res.data))
            .catch(swal("Good job!", "You clicked the button!", "warning"));

            
        swal("Good job!", "Your Details has been Update Successfully!", "success");
        //this.props.history.push('/');
       // }else{
       //     alert("You must fill in all of the fields.");
       // }
    }}

    render(){
        return(
            <div>

            <div className="container text-left">
            <div className="col-sm-10" >
                  
                  <h4> Business Studies</h4>
                  <h6>Dashboard/My courses/Business Studies/Question bank/Questions</h6>

                  <hr />
              </div>
                <form  onSubmit = {this.state.submitStatus
                    ? this.editQuestion
                    : this.addQuestion}>

                    <div className="col-sm-10 " >
                    <br/>
                    <h5> {this.state.submitStatus ? "EDIT QUESTION" : "ADD QUESTION"}</h5>
                    
                    </div>

                    <div className="col-sm-10" >
                        <br/>
                        <h4 className="text-left"> <b>Genaral</b></h4>
                    

                        <div className="row">
                            <div className="col-sm-5">
                            <label>Lesson No: </label>
                            <div style={{padding: '0px'}}>
                                        <select style={{width: '100%'}} className="browser-default custom-select"
                                                onChange={(e) => this.onChangeLessonNo(e)}>
                                            <option>Select Lesson No</option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>

                                            
                                        </select>
                                    </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>

                        <div className="row">
                            <div className="col-sm-10">
                                <label>Question text: </label>
                                <textarea
                                    className="form-control" required
                                    value ={this.state.question_text}
                                    onChange={this.onChangeQuestionText}

                                />
                            </div>

                    </div>
                    <div className="row">
                            <div className="col-sm-10">
                            <label>Answer: </label>
                                <textarea
                                    className="form-control" required
                                    value ={this.state.question_answer}
                                    onChange={this.onChangeQuestionAnswer}

                                />
                            </div>
                        </div>
                        

                        <div className="row">
                            <div className="col-sm-10">
                                <label>Default mark: </label>
                                <input type="text"
                                       className="form-control"
                                       value ={this.state.defult_mark}
                                       onChange = {this.onChangeDefultMark}
                                />
                            </div>
                        </div>

                       
                        <div className="row">
                            <div className="col-sm-10">
                            <label>Genaral feedback: </label>
                                <textarea
                                    className="form-control" required
                                    value ={this.state.general_feedback}
                                    onChange={this.onChangeGeneralFeedback}

                                />
                            </div>

                        </div>

                        

                    </div>
                        <div className="col-sm-10 " >
                        <br/>
                        

            
                        

                        
                     

                        <div className="row">
                            <div className="col-sm-5">
                                <Link style={{textDecoration:"none"}} to={"/admin/itemlist"}><button className="btn btn-block btn-warning" style={{color:"white"}}>BACK</button></Link>
                            </div>
                            <div className="col-sm-5">
                                <button type ="submit" value ="Submit"
                                        className = {this.state.submitStatus
                                            ? "btn btn-block btn-success"
                                            : "btn btn-block btn-primary"}
                                > {this.state.submitStatus ? "EDIT" : "ADD"}
                                </button>
                            </div>
                        </div>
                        </div>
                </form>
                <br/>



                
                <br/> <br/>
            </div>

        </div>
        )
    }
}