import React from 'react';
import { Field, reduxForm } from 'redux-form';
import formInput from '../../common/formInput';




class GetQuestions extends React.Component {
    state = {
        id: null,
        arrayQuestion: [],
        question:{
        names: null
        }
    }

    componentWillMount = () => {
        const { questions } = this.props;
        console.log(questions)
        this.setState({ arrayQuestion: questions })
    }

    changeQuestion = (event) => {
        this.setState({ question:{names: event.target.value} })
    }

    // handleClick =({el:{_id}})=>{
    //     const {actions:{getQestionsRequest}} =this.props
    //     console.log(_id)
    //     getQestionsRequest({_id})

    // }

    deleteClick = ({ el: { _id } }) => {
        this.setState({ id: _id })
        const { actions: { deleteQuestionRequest } } = this.props;
        deleteQuestionRequest({ _id })
    }

    componentWillUpdate(nextState, nextProps) {
        const { deleteQuestion: { isFetching } } = nextState;
        const { arrayQuestion, id } = nextProps;
        console.log(isFetching, "nextState---------", nextState, "nextProps_________", nextProps)
        if (!isFetching) {
            for (let key in arrayQuestion) {
                if (arrayQuestion[key]._id == id) {
                    this.setState(prevState => {
                        console.log("-------TRUE--------")
                        const array = prevState.arrayQuestion.slice()
                        array.splice(key, 1)
                        return {
                            arrayQuestion: array
                        }
                    })
                    break;
                }
            }

        }
    }

    render() {
        const { handleClick, deleteClick, changeQuestion } = this;
        const{question}=this.state
        const { arrayQuestion } = this.state;
        console.log(this.state)

        return (
            <div className=" profile-page p-4 d-flex flex-row font-ci">
                <div className="container w-100 h-auto  bg-stone  bg-mist-border">
                    <form >
                        <Field name="name" type="name" component={formInput} />
                        {
                            question.names==null
                        ?
                        <select class="custom-select bg-mist bg-mist-op text-white mt-3 mb-3" onChange={changeQuestion} value={question} >
                            <option selected>Open this Category menu</option>
                            {
                                arrayQuestion && arrayQuestion.map(el =>
                                    <React.Fragment>
                                        <option key={el._id} value={el.question}>{el.question}</option>
                                        <button class="btn btn-secondary font-ci font-ci-bold text-light bg-mist " type="button"  >
                                            P
                                    </button>
                                        <button class="btn btn-secondary font-ci font-ci-bold text-light bg-mist " onClick={deleteClick.bind(null, { el })} type="button"  >
                                            X
                                    </button>
                                    </React.Fragment>
                                )
                            }
                        </select>
                        :
                        <Field name="name" type="name" initialize ={this.state.question.names}component={formInput} />
                        
                        
                        }
                    </form>
                </div>
            </div >
        )
    }

}


export default reduxForm({
    form: "changeTestForm",
    enableReinitialize: true
})(GetQuestions)