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

export default class QuestionLayout extends Component {
   
    constructor(props) {
        
        super(props);
      
       
        this.onChangeCategory = this.onChangeCategory.bind(this);
        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeQuestionText = this.onChangeQuestionText.bind(this);
        this.onChangeDefultMark = this.onChangeDefultMark.bind(this);
        this.onChangeQType = this.onChangeQType.bind(this);
        this.onChangeGeneralFeedback = this.onChangeGeneralFeedback.bind(this);

        this.onChangeNext = this.onChangeNext.bind(this);


        this.state = {
            question_id : '',
            category : '',
            name : '',
            question_text : '',
            defult_mark : '',
            q_type : '',
            general_feedback : '',
            categoryArray: [],
            nextvalue: 0,
        }
    }

    

    onChangeCategory(e){
        this.setState({
            category :e.target.value
        });
    }

    onChangeName(e){
        this.setState({
            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
        });
    }
    onChangeNext(e){
        if(this.state.nextvalue<this.state.categoryArray.length-1){
        this.setState({
            nextvalue : this.state.nextvalue+1
        });
    }else
        console.log("press");
    }

    componentDidMount() {
        // axios.get('http://localhost:5000/questions/60d9c51296f586320087e10f')
        //     .then(response =>{
        //         this.setState({
        //             category : response.data.category,
        //             name : response.data.name,
        //             question_text : response.data.question_text,
        //             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
        //         })
        //     })
        //     .catch(function (error) {
        //         console.log(error)
        //     })


          //  if (this.state.item_id != null) {
                axios.get('http://localhost:5000/questions/lessonNo/1')
                    .then(response => {
                        //this.setState({productQuantities: response.data});
                        let CategoryList = [];
    
                        for (let i = 0; i < response.data.length; i++) {
    
                            CategoryList.push(response.data[i].question_text);
    
                        }
                        this.setState({
                            categoryArray: CategoryList,
                        })
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
           // } else {
           //     this.setState({categoryArray: []});
           // }
    }
        

   
    

    render() {
        return (
            <div className="container">
                <div class="border border-primary">
                    <div style={{ margin: "15px" }}>

             
                                    <div style={{ margin: "5px" }}>
                                        <h6>Question {this.state.nextvalue+1} </h6>
                                        <p>Not yet answered Mark out of 5.00</p>
                                    </div>
                          
                            <div class="p-3 mb-2 bg-light text-dark">
                                    <div className="text-left" style={{ margin: "10px" }}>
                                        
  
                                        {this.state.categoryArray[this.state.nextvalue]}
                                       
                            
                                <textarea
                                    className="form-control" required
                                    value ={this.state.general_feedback}
                                    onChange={this.onChangeGeneralFeedback}

                                />
                            

                      
                                    </div>
                                </div>
                            
                            
                        
                        <br/>
                        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                            
                        <button className="text-center" type="button"  onClick = {this.onChangeNext} class="btn btn-secondary btn-sm">Next</button>
</div>
                       

                    </div>


           
                </div>      </div>
        )
    }
}