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


const Quantity = props => (

    <tr>
        <td>{props.questions.lesson_no}</td>
        <td>{props.questions.question_text}</td>
        <td>{props.questions.question_answer}</td>
        <td>
            <div>
            <Link className="text-success fas fa-edit" to={"/questionmanagement/"+props.questions._id}></Link>  <span className=" mx-1 text-danger fas fa-trash" href='#' onClick={()=>{props.deleteProduct(props.questions._id)}} ></span>
            </div>
        </td>
    </tr>
);


export default class QuestionBankUI extends Component {

    constructor(props) {
        super(props);
        this.onChangeQType = this.onChangeQType.bind(this);
        this.deleteProduct = this.deleteProduct.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            q_type: '',
            questions: []
        }
    }

    quantityList() {
        return this.state.questions.map(currentTodo => {
            return <Quantity questions={currentTodo} deleteProduct={this.deleteProduct} key={currentTodo._id} />
        });
    }

    componentDidUpdate() {

        axios.get('http://localhost:5000/questions/')
            .then(response => {
                this.setState({ questions: response.data });
            })
            .catch(function (error) {
                console.log(error);
            })


    }

    componentDidMount() {

        axios.get('http://localhost:5000/questions/')
            .then(response => {
                this.setState({ questions: response.data });
            })
            .catch(function (error) {
                console.log(error);
            })


    }

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

    onSubmit(e) {
        e.preventDefault();

        //console.log(`Question type: ${this.state.q_type}`);
        window.location = '/questionmanagement/';

        //window.location = '/admin/pcategory';
    }

    deleteProduct(pid){
        axios.delete('http://localhost:5000/questions/delete/'+pid)
        .then(res => console.log(res.data));
    this.setState({
        questions:this.state.questions.filter(el => el.pid !==pid)
    });
    }

    render() {
        return (
            <div className="container text-left">
                <div className="col-sm-10" >

             
                    <hr />
                </div>

                <div className="col-sm-10" >
                    <div className="row" >

                        <div className="col-sm-3">
                            <Link style={{textDecoration:"none"}} to={"/questionmanagement"}><button className="btn btn-block btn btn-secondary" style={{color:"white"}}>Create new Question</button></Link>

                        </div>

                        <div className="col-sm-3">
                            <Link style={{textDecoration:"none"}} to={"/automaticquestion"}><button className="btn btn-block btn btn-info" style={{color:"white"}}>Auto Genarate Question</button></Link>



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



<br/>
             
                <div className="col-sm-10">
                <table className="table" >
                    <thead>
                        <tr>
                            <th><h6>Lesson</h6></th>
                            <th><h6>Question</h6></th>
                            <th><h6>Answer</h6></th>
                            <th className="col-sm-1"><h6>Action </h6></th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.quantityList()}
                    </tbody>
                </table>
                </div>
            </div>
        )
    }
}