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

class CreateTopic extends React.Component {

    state = {
        click: false,
        arrayAnswers: [],
        array: [],
        simple: false,
        click_2: false,
        click_3: false

    }

    submit = () => {
        const { actions: { createTopicsRequest }, categoryId, formValues: { name, description } } = this.props;
        console.log(name, description)
        createTopicsRequest({
            name,
            description,
            categoryId,

        })
    }
    qestionAnswerSubmit = () => {
        const { simple, array } = this.state
        const {  topic: { _id }  , actions: { createTestRequest }, formValues: { questions } } = this.props;
        console.log(questions)
        createTestRequest({
            questions,
            simple,
            _id,
            array
        })
        this.setState({ arrayAnswers:[] })
        this.setState({ array:[] })




    }

    handelChange = () => { this.setState((prevState) => ({ simple: !prevState.simple })) }

    handelClick = () => { this.setState((prevState) => ({ click: !prevState.click })) }

    handleClick_3 = () => {
        this.setState((prevState) => ({ click_2: !prevState.click_2 }))
        this.setState({ click_3:true })
        this.setState((prevState) => ({ arrayAnswers: prevState.arrayAnswers.concat(prevState.arrayAnswers.length + 1) }))

    }
    handelClick_2 =()=>{
        this.setState((prevState) => ({ click_3: !prevState.click_3 }))

    }
    formSubmitinput = (event) => {
        const currentId = this.state.arrayAnswers.length;

        const values = {
            answer: event[`answers${currentId}`],
            price: Number(event[`price${currentId}`]),
            correct: event[`correct${currentId}`] || false
        }
        console.log(values)
        this.setState((prevState) => ({ array: prevState.array.push(values) }, console.log(prevState.array)))
        this.setState((prevState) => ({ click_2: !prevState.click_2 }))

    }


    render() {
        const { handleSubmit} = this.props;
        const { simple, price, correct, click, array, arrayAnswers, click_2, click_3 } = this.state;
        const { handelChange, submit, handelClick, formSubmitinput, qestionAnswerSubmit, handelClick_2, handleClick_3 } = this;
console.log(this.state)
        return (
            <div>
                <form onSubmit={handleSubmit(qestionAnswerSubmit)}>
                    <h4 className="text-white font-ci"> Enter topic </h4>
                    <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name="name" type="name" placeholder="Create Name Topic" component={formInput} />
                    <h4 className="text-white font-ci"> Enter description </h4>
                    <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name="description" type="textarea" placeholder="Create Descriptions" component={formInput} />
                    {
                        !click
                            ?
                            <button className= "btn  btn-outline-light bg-stone"
                                onClick={() => {
                                    handelClick()
                                    submit()
                                }}>
                                Create questions
                            </button>
                            :
                            <div>
                                <h4 className="text-white font-ci"> Enter question and set the difficulty level</h4>
                                <div className="d-flex w-100 ">
                                    <Field className="bg-stone bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name="questions" type="questions" placeholder="Create Qestions" component={formInput} />
                                    <Field className="bg-mist bg-mist-op text-white mt-4 pb-1  border rounded w-25 flex-row align-items-end check" name="simple" type="checkbox" checked={simple} onChange={handelChange} component={formInput} />
                                </div>
                                {
                                    click_3
                                        ?

                                        arrayAnswers.map(el =>
                                            <div key={el} id={el}>
                                                <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name={`answers${el}`} type="name" placeholder="Add anwer" ref='ansversInput' component={formInput} />
                                                <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name={`price${el}`} type="number" value={price} component={formInput} />
                                                <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name={`correct${el}`} type="checkbox" checked={correct} component={formInput} />
                                            </div>
                                        )
                                        :
                                null

                                }

                                <React.Fragment>
                                    {
                                        click_2
                                            ?
                                            <button className= "btn  btn-outline-light bg-stone m-3" type="button" onClick={handleSubmit(formSubmitinput)}>Add answer</button>
                                            :
                                            <React.Fragment>
                                                <button className= "btn  btn-outline-light bg-stone m-3" type="button " onClick={handleClick_3}>Create answers</button>
                                                <button className= "btn  btn-outline-light bg-stone m-3" onClick ={handelClick_2} >Create Questions</button>
                                            </React.Fragment>
                                    }



                                </React.Fragment>


                        

                            </div>
                    }

                </form>
            </div>
        )

    }

}

const selector = formValueSelector('createTopicForm');

const mapStateToProps = state => ({

    formValues: selector(state, 'name', 'description', 'questions', 'simple', 'answer', 'price', 'correct')
})

export default connect(mapStateToProps, null)(reduxForm({
    form: "createTopicForm",
    validate
})(CreateTopic));