import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import AnswerSheet from "../../../components/AnswerSheet";
import Button from "../../../components/Button";
import DatePicker from "../../../components/Calendar/CalendarComponents/DatePicker";
import Checkbox from "../../../components/Checkbox";
import RangeDatePicker from "../../../components/RangeDatePicker";
import SelectedCourse from "../../../components/selectedCourse";
import filterIcon from '../../../assets/img/filter.svg'
import Question from "../components/question";
import { numOfinitQs } from "../../../redux/reducers/exam";
import AddQuestionPopUp from "../components/addQuestion";

const AddQuestionsFromBank = ({ grades, addExamState, dispatch, stepClick, backStep }) => {
    const [name, setName] = useState(null);
    const [type, setType] = useState(null);
    const [description, setDescription] = useState(null);
    const [questionarePopUp, setQuestionairePopUp] = useState(false);
    const [addQuestionPopup, setAddQuestionPopuo] = useState(false);
    const [newQuestionaire, setNewQuestionaire] = useState({
        id: addExamState.questionnaires.length + 1,
        name: '',
        fileUrl: '',
    });
    const [showCoursesInList, setShowCoursesInList] = useState([]);
    const [choosedQuestion, seChoosedQuestion] = useState(null);
    const [selectedCourse, setSelectedCourse] = useState({
        id: null,
        title: '',
        selectedQuestions: [],
    });



    // console.log(choosedQuestionaries)
    // console.log(newQuestionaire)
    // console.log(addExamState.questionnaires)
    // console.log(newCourse)
    // console.log(addExamState.questionairesCourses)
    console.log(selectedCourse)
    // console.log(answers)
    console.log(choosedQuestion)
    console.log(selectedCourse.selectedQuestions)

    const [fakeState, setFakeState] = useState(2);




    const payload = { name: name, description: description, type: type };

    const handleOnDragEnd = (result) => {
        const { source, destination } = result;

        if (source.droppableId !== destination?.droppableId) {
            if (destination?.droppableId == 'Choosed_Questions_Form_Bank') {
                dispatch({ type: 'ADD_EXAM_QUESTIONS', payload: choosedQuestion })
                dispatch({ type: 'REMOVE_QUESTION_FROM_BANK', payload: choosedQuestion })

            } else {
                dispatch({ type: 'REMOVE_EXAM_QUESTIONS', payload: choosedQuestion })
                dispatch({ type: 'GET_QUESTION_BACK_TO_BANK', payload: choosedQuestion })
            }

        } else {
            if (source.droppableId == 'Choosed_Questions_Form_Bank') {
                // const data = {
                //     startIndex: choosedQuestion,
                //     endIndex: destination.index
                // }
                // dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
                // console.log(data)

                const aaa = [...addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions];
                const [removed] = aaa.splice(source.index, 1);

                aaa.splice(destination.index, 0, removed);
                dispatch({ type: 'CHANGE_QUESTION_ORDER', payload: aaa })
                console.log(result)
                console.log(source.index)
                console.log(destination.index)
                console.log(aaa)

            }
        }
    }




    const [numberOfOptions, setNumberOfOptions] = useState(null);
    const [options, setOptions] = useState([])
    const [question, setQuestion] = useState({
        title: '',
        options: [],


    })
    useEffect(() => {

        const arr = [];
        for (var i = 1; i <= numberOfOptions; i++) {
            arr.push({
                id: i,
                title: '',
                isAnswer: false
            })
        }
        setOptions(arr)
        setQuestion({
            ...question,
            options: arr,
            courseId: selectedCourse.id,
            questionId: numOfinitQs + addExamState.questionBank.length + fakeState,
        })

    }, [numberOfOptions])

    console.log(question)
    console.log(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions)
    return (
        <>
            {
                questionarePopUp && <div className="w-full z-10 fixed h-screen backdrop-blur flex items-center -mt-10 justify-center">
                    <div className="w-1/2 bg-white rounded-xl flex flex-col shadow-lg p-6">
                        <div className="w-full">
                            <div className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52" onClick={() => setQuestionairePopUp(false)}>
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 15.044 15.044">
                                    <g id="vuesax_linear_card-remove" data-name="vuesax/linear/card-remove" transform="translate(-252.46 -511.461)">
                                        <g id="card-remove" transform="translate(253.309 512.31)">
                                            <path id="Vector" d="M0,13.347,13.347,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
                                            <path id="Vector-2" data-name="Vector" d="M13.347,13.347,0,0" fill="none" stroke="#fff" strokeLinecap="round" strokeWidth="2" />
                                        </g>
                                    </g>
                                </svg>
                            </div>
                        </div>
                        <h1 className="w-full text-right text-lg text-red52 font-bold pt-4">
                            افزودن درس
                        </h1>



                        {
                            addExamState.courseBank.map(
                                (item, index) => (
                                    <>
                                        <div className="w-full flex items-center py-2 justify-between border-b pl-8 border-gray-200">
                                            <Checkbox name={`PICK_QUESTIONARE_${index}`}
                                                onChange={(e) =>
                                                    e.target.checked ?
                                                        dispatch({ type: 'ADD_EXAM_COURSE', payload: item })
                                                        :


                                                        dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item })


                                                }

                                            />
                                            <h2 className="text-red26 font-bold">{item.title}</h2>
                                            {/* <h4>تعداد سوالات: {item.numberOfQuestions}</h4>
                                                <p>تعداد دروس: {item.courses.length}</p> */}
                                            {/* <p className="cursor-pointer" onClick={() => {
                                                    let newArray = [...showCoursesInList];
                                                    
                                                    newArray[index] = !newArray[index];


                                                    setShowCoursesInList(newArray)

                                                }}>نمایش دروس</p> */}

                                        </div>

                                    </>
                                )
                            )
                        }
                    </div>


                </div>
            }
            {
                addQuestionPopup === 'component' &&
                // <AddQuestionPopUp 
                // closeOnClick={() => setAddQuestionPopuo(false)}
                // submitOnClick={data => {
                //     dispatch({type: 'ADD_CUSTOM_QUESTION', payload: {
                //         ...data,
                //         questionId:addExamState.questionBank.length + 1 ,
                //         courseId: selectedCourse.id,
                //     }})
                //     console.log({
                //         ...data,
                //         questionId: addExamState.questionBank.length + 1,
                //         courseId: selectedCourse.id,
                //     })
                // }}
                // />
                <></>


            }
            <div className="flex py-10 items-start px-10 border-b border-gray-200">
                <div className="flex flex-col w-1/6">
                    <div className="text-blue3A text-lg font-bold  text-right px-4  border-r-4 border-blue65">
                        تنظیمات آزمون

                    </div>
                    <p className="text-sm text-right font-bold pt-4 text-gray-500">لطفا مشخضات آزمون را تکمیل کنید</p>
                </div>
                <div className="w-5/6 flex flex-row">
                    <DragDropContext
                        onDragEnd={(result) => {
                            const { source, destination } = result;
                            if (source.droppableId == 'Choosed_Courses_Form_Bank') {
                                // const data = {
                                //     startIndex: choosedQuestion,
                                //     endIndex: destination.index
                                // }
                                // dispatch({type:'CHANGE_QUESTION_ORDER', payload : data})
                                // console.log(data)

                                const aaa = [...addExamState.courses];
                                const [removed] = aaa.splice(source.index, 1);

                                aaa.splice(destination.index, 0, removed);
                                dispatch({ type: 'CHANGE_COURSE_ORDER', payload: aaa })
                                console.log(result)
                                console.log(source.index)
                                console.log(destination.index)
                                console.log(aaa)

                            }
                        }}
                    >
                        <Droppable droppableId="Choosed_Courses_Form_Bank" direction="horizontal" >
                            {(provided) => (
                                <div className="flex">
                                    {provided.placeholder}
                                    <div className=" flex " {...provided.droppableProps} ref={provided.innerRef}>
                                        {addExamState.courses.length > 0 &&
                                            addExamState.courses.map(
                                                (item, index) => (
                                                    <Draggable draggableId={`COURSE_${item.id}`} index={index} key={`CHOOSED_COURSE_${item.id}`}>
                                                        {(provided) => (
                                                            <div
                                                                {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef}
                                                                className={`flex flex-col ${selectedCourse.id === item.id ? 'bg-pinkF5 border border-red52 text-red52' : 'bg-white border border-gray-300 text-blue3A'}  items-center justify-between pb-12 pt-2 w-36 h-32 mx-2 font-bold  rounded-xl cursor-pointer`}
                                                                onClick={() => setSelectedCourse(item)}
                                                            >
                                                                <p className="w-full text-left px-4" >
                                                                    <span onClick={() => { dispatch({ type: 'REMOVE_EXAM_COURSE', payload: item }); setSelectedCourse(null); setFakeState(fakeState + 24) }}> x </span>
                                                                </p>

                                                                <p className="text-red52">
                                                                    {item.title}
                                                                </p>
                                                            </div>

                                                        )}

                                                    </Draggable>
                                                ))

                                        }

                                    </div>


                                </div>
                            )}
                        </Droppable>
                    </DragDropContext>
                    <div className="flex flex-col bg-white items-center justify-center w-36 h-32 mx-2 font-bold border border-gray-300 text-blue3A rounded-xl cursor-pointer" onClick={() => setQuestionairePopUp(true)}>
                        <p className="" style={{ fontSize: '40px' }}>
                            +
                        </p>
                        <p className="">
                            افزودن درس
                        </p>
                    </div>



                </div>

            </div>
            {/* Picking Question Container */}
            <DragDropContext onDragEnd={result => handleOnDragEnd(result)}
                onDragStart={(result) => {
                    console.log(result)
                    if (result.source.droppableId == 'Choosed_Questions_Form_Bank') {
                        seChoosedQuestion(addExamState.courses.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions[result.source.index])
                    } else {
                        seChoosedQuestion(addExamState.questionBank.find(itm => itm.questionId == result.source.index))
                    }
                }}>

                <div className="w-full flex border-b border-gray-200  px-2 pl-0">
                    {/* Picked Qeustions From Bank */}
                    <Droppable droppableId="Choosed_Questions_Form_Bank">
                        {(provided) => (


                            <div className="w-1/2 border-l flex flex-col border-gray-200 py-0 pb-6" {...provided.droppableProps} ref={provided.innerRef}>
                                {
                                    selectedCourse.id !== null && (<>

                                        {/* Picked Questions Top Bar */}
                                        <div className="w-full flex h-16 px-8 mb-3 justify-start pt-4 items-center">
                                            <h1 className="text-blue3A  font-bold text-lg text-right  pl-4">
                                                سوالات {selectedCourse.title}
                                            </h1>
                                            <div className="px-2 pl-4 text-gray37 text-sm flex items-center border-l border-red52">
                                                <p>ضریب</p>
                                                <input type='number' value={selectedCourse?.coefficient} onChange={(e) => console.log(e.target.value)}
                                                    className="w-5 h-5 flex text-center items-center pt-1 rounded border border-red5B text-sm text-gray-600 mr-2" />
                                            </div>
                                            <div className="px-2 pl-0 text-gray37 text-sm flex items-center ">
                                                <p>تعداد گزینه</p>
                                                <input type='number' value={selectedCourse?.numberOfOptions} onChange={(e) => console.log(e.target.value)}
                                                    className="w-5 h-5 flex text-center items-center pt-1 rounded border border-red5B text-sm text-gray-600 mr-2" />
                                            </div>
                                            <div className="px-2 pl-4 text-gray37 text-sm flex items-center ">
                                                <Checkbox name={`ADD_QUESTION_HAS_MINUS__${selectedCourse.id}`} />
                                                <p>نمره منفی</p>
                                            </div>

                                        </div>


                                        <div className="flex flex-col items-center overflow-x-hidden overflow-scroll" style={{ height: '550px' }}>
                                            <div className="w-11/12 ">
                                                {
                                                    addQuestionPopup === 'component' &&
                                                    <AddQuestionPopUp
                                                        titlePass={title => setQuestion({
                                                            ...question,
                                                            title: title
                                                        })}
                                                        options={question.options}
                                                        setAsAnswer={e => {
                                                            let thisOption = question.options.find(itm => itm.id == e)
                                                            thisOption.isAnswer = !thisOption.isAnswer

                                                            setQuestion({
                                                                ...question,
                                                                options: [...options]
                                                            })

                                                        }}
                                                        scorePass={score => setQuestion(
                                                            {
                                                                ...question,
                                                                score: parseInt(score)
                                                            }
                                                        )}
                                                        passOptionTitle={(optionTitle, id) => {
                                                            let thisOption = question.options.find(itm => itm.id == id)
                                                            thisOption.title = optionTitle
                                                            setQuestion({
                                                                ...question,
                                                                options: [...options]
                                                            })
                                                        }}
                                                        submitOnClick={() => {
                                                            setAddQuestionPopuo(false)

                                                            dispatch({ type: 'ADD_CUSTOM_QUESTION', payload: question });
                                                            setNumberOfOptions(null)

                                                        }}
                                                        cancelOnClick={() => setAddQuestionPopuo(false)}
                                                    />
                                                }

                                                {
                                                    addExamState.courses?.filter(itm => itm.id == selectedCourse.id)[0]?.selectedQuestions?.map(
                                                        (item, index) => (
                                                            <Draggable draggableId={`_${item.questionId}`} index={index} key={`CHOOSED_QUESTIONS_${item.questionId}`}>
                                                                {(provided) => (
                                                                    <div className="flex items-start" {...provided.draggableProps} ref={provided.innerRef}>
                                                                        <div className="mt-8 px-2 m-0" {...provided.dragHandleProps}>
                                                                            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                                <path d="M3 7H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
                                                                                <path d="M3 12H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
                                                                                <path d="M3 17H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
                                                                            </svg>

                                                                        </div>
                                                                        <Question data={item} />
                                                                    </div>
                                                                )}
                                                            </Draggable>
                                                        )
                                                    )
                                                }
                                                {provided.placeholder}
                                            </div>

                                        </div>

                                    </>)
                                }
                                {selectedCourse.id !== null &&
                                    <div className="w-full flex justify-center mt-10">
                                        {addQuestionPopup == false &&
                                            <div className="flex flex-col w-full items-center">
                                                <button className=" w-4/5 bg-transparent text-xl  text-blue3A border-gray-300 h-12 rounded-xl border mb-6"
                                                    onClick={() => { setFakeState(fakeState + 5); setNumberOfOptions(selectedCourse.numberOfOptions); setAddQuestionPopuo('component') }}>
                                                    اضافه کردن سوال جدید +
                                                </button>
                                                <h1 className="w-4/5 text-center border-b border-red52 my-5 mx-0" style={{ lineHeight: '0.1em' }}>
                                                    <span className="bg-white py-0 px-10 text-blue3A"
                                                    >پایان سوالات</span>
                                                </h1>
                                            </div>

                                        }
                                    </div>}

                            </div>

                        )}
                    </Droppable>
                    <div className="w-1/2 flex flex-col items-center justify-start">
                        {selectedCourse.id !== null ?
                            <>
                                <div className="w-full flex pb-4 py-2 px-8 mb-3 justify-between pt-4 border-b border-gray-200 items-center">
                                    <div className="flex justify-start items-center">
                                        <div className="text-blue3A flex items-center font-bold text-lg text-right  pl-4">
                                            <Checkbox name={`CHOOSE_ALL_QUESTIONS_IN_BANK_${selectedCourse.id}`} />
                                            <h1 className="pr-2">انتخاب همه</h1>
                                        </div>
                                        <div className="px-2 pl-4 text-gray37 text-sm flex items-center ">
                                            <img src={filterIcon} />
                                            <select className="mr-2 bg-transparent border border-gray-200 text-gray-500 pl-4 outline-none pr-2 rounded-md py-2">
                                                <option className="hover:bg-red52">فیلتر بر اساس</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div className="px-2 pl-10 text-gray37 text-sm flex items-center ">

                                        <input type='search' placeholder="جستجو..." onChange={(e) => console.log(e.target.value)}
                                            className="w-full h-10 flex px-4 items-center pt-1 outline-none rounded-md border border-gray-300 text-sm text-gray-600 mr-2" />
                                    </div>


                                </div>
                                <Droppable droppableId="QUESTIONS_IN_BANK">
                                    {(provided) => (

                                        <div className="w-full py-1 flex flex-col items-center overflow-x-hidden overflow-scroll" >



                                            <div className="w-11/12" {...provided.droppableProps} ref={provided.innerRef}>
                                                {
                                                    addExamState.questionBank?.filter(itm => itm.courseId == selectedCourse.id)?.map(
                                                        (course, index) => (
                                                            <Draggable draggableId={`_${course.questionId}`} index={course.questionId} key={`CHOOSED_QUESTIONS_${course.questionId}`}>
                                                                {(provided) => (

                                                                    <div {...provided.draggableProps} ref={provided.innerRef} className="flex items-start justify-center w-full">
                                                                        <div className="mt-8 px-2 m-0" {...provided.dragHandleProps}>
                                                                            <svg width="30" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                                <path d="M3 7H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
                                                                                <path d="M3 12H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
                                                                                <path d="M3 17H21" stroke="#585858" strokeWidth="1.5" strokeLinecap="round" />
                                                                            </svg>

                                                                        </div>
                                                                        <Question data={course} />
                                                                    </div>
                                                                )}
                                                            </Draggable>
                                                        )
                                                    )
                                                }

                                            </div>



                                            {/* <Question /> */}
                                            {provided.placeholder}
                                        </div>



                                    )}
                                </Droppable>
                            </>
                            :
                            <div className="w-full" style={{ height: '450px' }}>

                            </div>
                        }
                    </div>


                </div>
            </DragDropContext>


            <div className="flex w-full px-10 items-center justify-end">
                <button className=' mx-6 h-12 mt-4  text-red52 font-bold flex items-center justify-center' onClick={() => backStep()}> بازگشت به مرحله قبل </button>
                <Button
                    title='مرحله بعدی'
                    className='w-1/12'
                    onClick={() => {
                        dispatch({ type: 'ADD_EXAM_DESCRIPTION', payload });
                        stepClick()
                    }}

                />


            </div>

        </>
    )
}

const mapStateToProps = (state) => ({
    grades: state.publicApi.grades,
    addExamState: state.addExamReduser
})

export default connect(mapStateToProps)(AddQuestionsFromBank);