import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { getTopicRequest } from '../../../actions/admin/changeTest/getTopic';
import { getQuestionsRequest } from '../../../actions/admin/changeTest/getQuestions';
import { deleteTopicRequest } from '../../../actions/admin/changeTest/deleteTopic';
import { deleteQuestionRequest } from '../../../actions/admin/changeTest/deleteQuestion';
import { getCategoryRequest } from '../../../actions/admin/category/getCategory';
import { getAnswersRequest } from '../../../actions/admin/changeTest/getAnswers';
import { changeTestRequest } from '../../../actions/admin/changeTest/changeTest';

import PropagateLoader from 'react-spinners/PropagateLoader';


import GetTest from './GetTest';
import GetTopic from './GetTopic';
import EditModal from './OpenModal';
import GetQuestions from './GetQuestions';




class ChangeTest extends React.Component {
    state = {

        categoryId: null,
        name: null,
        topicId: null,
        description: null,
        answers: [],
        answer: null,
        correct: null,
        price: null,
        simple: null,
        openModal: false,
        toggleModal: false,
        click: false

    }

    openEditModal = ({ el: { _id, description, name } }) => {
        const { getQuestionsRequest } = this.props
        getQuestionsRequest({ _id })
        this.setState(({ openModal: true, toggleModal: false, topicId: _id, description: description, name: name }))
    }

    closeModal = () => { this.setState((prevState) => ({ openModal: !prevState.openModal })) }

    getQuestionClick = ({ el: { _id } }) => {
        const { getTopicRequest } = this.props
        getTopicRequest({ _id })
        this.setState({ categoryId: _id })
    }

    handelClick = ({ el: { answer, correct, price, _id } }) => {
        // const answers =`answer${_id}`
        // const corrents =`corrent${_id}`
        // const prices =`price${_id}`
        // console.log(answer)
        this.setState({ answer: answer, corrent: correct, price: price });
        this.setState((prevState) => ({ click: !prevState.click }))

    }

    componentWillMount = () => {
        const { getCategoryRequest } = this.props
        getCategoryRequest()
    }
    componentWillReceiveProps(nextProps) {
        console.log(nextProps)
        const { arrayAnswers: { answers } } = nextProps;
        if (answers !== null) {
            this.setState({ answers: answers })
        }
    }
    // componentWillUpdate(nextState, nextProps) {
    //     console.log("-------NEXT STATE---------", nextState, "---------NEXT PROPS---------", nextProps)

    // }

    render() {
        const { getQuestionClick, openEditModal, closeModal, handelClick, state } = this;
        const { openModal, questionId, name, topicId, description, answers, click } = this.state
        // const { topic, deleteQuestionRequest, getQuestionsRequest, arrayQuestions: { questions, isFlag }, deleteTopicRequest, deleteTopic, deleteQuestion } = this.props;
        // console.log(topic)
        const initialValues = {
            ...state
        }
        const { category: { data, isFlag }, topic, arrayQuestions, getAnswersRequest, arrayAnswers, changeTestRequest } = this.props
        console.log(this.state)

        return (
            <div className=" p-5 d-flex flex-row font-ci">

                {
                    !isFlag
                        ?
                        <PropagateLoader />
                        :
                        <React.Fragment>
                            <GetTest data={data} handlers={{ getQuestionClick }}></GetTest>
                            {
                                topic.isFlag
                                    ?
                                    <React.Fragment>
                                        <GetTopic handlers={{ openEditModal }} topic={topic}></GetTopic>
                                        <EditModal visible={openModal} handlers={{ handelClick }} click={click} answers={answers} actions={{ getAnswersRequest, changeTestRequest }} arrayQuestions={arrayQuestions} initialValues={initialValues}
                                            handleClose={{ closeModal }}></EditModal>
                                    </React.Fragment>
                                    :
                                    null

                            }

                        </React.Fragment>
                }
            </div>
        )
    }

}

const
    mapStateToProps = state => ({
        topic: state.topic,
        arrayQuestions: state.arrayQuestions,
        deleteTopic: state.deleteTopic,
        deleteQuestion: state.deleteQuestion,
        category: state.category,
        arrayAnswers: state.arrayAnswers

    });

const mapDispatchToProps = dispatch => bindActionCreators({ getCategoryRequest, getTopicRequest, changeTestRequest, getQuestionsRequest, deleteTopicRequest, deleteQuestionRequest, getAnswersRequest }, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(ChangeTest);