import {LoadingList} from "../components/LoadingList.tsx";
import {AgreementQuestion, Question, QuestionPair, QuestionType, Survey} from "../types/survey.ts";
import {Link, useParams} from "react-router-dom";
import React, { useState } from "react";
import {useData, useDataPage} from "../API/common.ts";
import {LoadingData} from "../components/LoadingData.tsx";



export function SurveyPage() {

    const {surveyId} = useParams();

    const survey = useData<Survey>("surveys", "surveys", surveyId);

    return (
        <div className="survey-page">
            <LoadingData data={survey}>
                <h1>
                    {survey?.title}
                </h1>
                <div>
                    {survey?.description}
                </div>

                <SurveyQuestions survey={survey}/>

            </LoadingData>

        </div>
    );
}


function SurveyQuestions({survey}: { survey: Survey | null | undefined }) {

    const _survey = survey as Survey;

    const [questions, setQuestions] = useState<Question[]|null>(null);

    const questionsPairs = useDataPage<QuestionPair>("surveys", "question-pairs", {survey:_survey.id});
    const questionsAgreement = useDataPage<AgreementQuestion>("surveys", "agreement-questions", {survey:_survey.id});

    if (questions === null && questionsPairs.items !== null && questionsAgreement.items !== null){

        function setQuestionType(question: Question, questionType: QuestionType) {
            question.questionType = questionType;
            return question;
        }

        var _questions = [...questionsPairs.items.map(q=>setQuestionType(q, QuestionType.QuestionPair)), ...questionsAgreement.items.map(q=>setQuestionType(q, QuestionType.AgreementQuestion))];
        _questions.sort(()=>Math.random() - .5);
        console.log(questionsPairs.items.map(q=>setQuestionType(q, QuestionType.QuestionPair)));
        
        setQuestions(_questions);
    }
    
    //console.log(questions);
    

    return (
        <>
            <LoadingList data={questions} listElement={(question=>(
                <QuestionBlock key={(question as Question).questionType+"#"+question.id} question={question as Question}/>

            ))}/>

        </>
    );
}

function QuestionBlock({question}:{question: Question}) {
    
    switch (question.questionType) {
        case QuestionType.AgreementQuestion:
            const qa = question as AgreementQuestion;
            return (
                <div className={"question agreement"}>
                    (Вы согласны с утверждением?)
                    {qa.question}
                    <button>
                        Согласен
                    </button>
                    <button>
                        Несогласен
                    </button>
                </div>
            );
    
        case QuestionType.QuestionPair:
            
            const qp = question as QuestionPair;
            return (
                <div className={"question pair"}>
                    (Выберите подходящий ответ)
                    {qp.statements.map(s=>(<button>{s.text}</button>))}

                </div>
            );
    
        default:
            break;
    }


    return null;
}