import React, { useState, useContext, useEffect } from "react";
import { useCookies } from "react-cookie";
import { useNavigate, useParams } from 'react-router-dom';
import { answersData } from "../context";
import classes from "../assets/styles/answersForm.module.scss";
import { responseDataToListBlock, dateTimeParse } from "../hooks/sundry/parseListBlock";
import { listFormBlockApi, getAnswersApi } from "../hooks/api/formApi";
import { listUsersApi } from "../hooks/api/adminApi";

const AnswersForm = () => {
    const { formId } = useParams();
    const {answersList, setAnswersList} = useContext(answersData);
    const [data, setData] = useState(false);
    const [cookies, _, __] = useCookies(["user"]);

    useEffect(() => {
        async function getForm() {
            const result = []
            const responseBlocks = await listFormBlockApi(cookies.token, formId);
            const responseAnswers = await getAnswersApi(cookies.token, formId);
            const listUsers = await listUsersApi(cookies.token);
            console.log("responseBlocks", responseBlocks)
            console.log("responseAnswers", responseAnswers)

            if (responseBlocks.status === 200 && responseBlocks.data) {
                const listBlocks = responseDataToListBlock(responseBlocks.data);
                
                if (responseAnswers.data) {
                    for (let item of responseAnswers.data) {
                        const blocks = {
                            user: listUsers.data.find(user => user.id === item.user_id).login,
                            date: dateTimeParse(item.date),
                            block: []
                        }

                        if (item.data) {
                            for (let i = 0; i < item.data.length; i++) {
                                blocks.block.push({answers: {id: item.data[i][0].Value, answer: item.data[i][1].Value}, question: listBlocks[i]})
                            }
                        }
                        else {
                            for (let i = 0; i < listBlocks.length; i++) {
                                blocks.block.push({answers: [], question: listBlocks[i]})
                            }
                        }

                        result.push(blocks)
                    }   
                    console.log("result", result)
                }

                setData(result)
            }
            else {
                console.log(responseBlocks)
            }
        };

        getForm()
    }, []);

    return (
        <div className={classes.main}>
            <div className={classes.wrapper}>
                <div className={classes.answers}>
                    <div className={classes.answers__wrapper}>
                        <div className={classes.answers__wrapper__header}>
                            <h3>Ответы</h3>
                        </div>
                        <div className={classes.answers__wrapper__body}>
                            <div className={classes.answers__wrapper__body__column}>
                                <div>Логин</div>
                                <div>Дата</div>
                            </div>

                            {data ? 
                                data.map((item, i) => 
                                    <div className={classes.answers__wrapper__body__item} key={i}>
                                        <div className={classes.answers__wrapper__body__item__user} data-bs-toggle={"modal"} data-bs-target={`#answersModal${i}`}>
                                            {item.user}
                                        </div>
                                        <div className={classes.answers__wrapper__body__item__date}>
                                            {item.date}
                                        </div>

                                        <div class="modal fade myModal" className={classes.myModal} id={`answersModal${i}`} tabIndex="-1" aria-labelledby="exampleModalLabel" data-bs-backdrop="static" aria-hidden="true">
                                            <div class="modal-dialog myModal__dialog" className={classes.myModal__dialog}>
                                                <div class="modal-content" className={classes.myModal__dialog__content}>
                                                    <div class="modal-body" className={classes.myModal__dialog__content__body}>


                                                        {item.block.map((block, i) => 
                                                        <div className={classes.myModal__item} key={i}>
                                                            <div className={classes.myModal__item__question}>
                                                                <p className={classes.myModal__item__question__text}>{block.question.question}</p>
                                                                <p className={classes.myModal__item__question__comment}>{block.question.comment}</p>
                                                            </div>
                                                            <div className={classes.myModal__item__answer}>
                                                                <p className={classes.myModal__item__question__text}>Ответ: {
                                                                    Array.isArray(block.answers.answer) ? 
                                                                    block.answers.answer.map(item => <span>{item}; </span>) :
                                                                    block.answers.answer
                                                                }</p>
                                                            </div>
                                                        </div>)}
                                                    </div>
                                                    <div class="modal-footer myModal__dialog__content__footer" className={classes.myModal__dialog__content__footer}>
                                                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Отмена</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            : 
                            <div className={classes.loading__wrapper}>
                                <div class="spinner-border text-dark" className={classes.loading__wrapper__body} role="status">
                                    <span class="visually-hidden">Загрузка...</span>
                                </div>
                            </div>}
                        </div>                        
                    </div>
                </div>
            </div>
        </div>
    )
}

export default AnswersForm;