import SurveyInfo from "../SurveyInfo/SurveyInfo.tsx";
import QuestionsList, {Question} from "../QuestionsList/QuestionsList.tsx";
import {useEffect, useState} from "react";
import styles from './CompletingSurvey.module.css'
import { useParams} from "react-router-dom";
import {getSurveyById, ISurvey} from "../../api/SurveyApi.ts";
import {getListQuestions} from "../../api/QuestionApi.ts";
import {getAnswerVariants, IAnswerVariant} from "../../api/AnswerVariantsApi.ts";

export const CompletingSurvey = () => {
    // const [titleSurvey, setTitleSurvey] = useState("Название опроса");
    // const [descriptionSurvey, setDescriptionSurvey] = useState("");
    // const [questions, setQuestions] = useState<Question[]>([
    //     { id: 1, text: 'Вопрос 1', questionType: 'SingleAnswerQuestion', answerVariants: [{ id: 1, text: 'Ответ 1' },
    //             { id: 2, text: 'Ответ 1' }, { id: 3, text: 'Ответ 1' }]},
    //     { id: 2, text: 'Вопрос 2', questionType: 'MultipleAnswerQuestion', answerVariants: [{ id: 1, text: 'Ответ 1' },
    //             { id: 2, text: 'Ответ 1' }, { id: 3, text: 'Ответ 1' }]}
    // ]);

    // const [questions, setQuestions] = useState<Question[]>([]);
    // const [loading, setLoading] = useState(true);
    // const [error, setError] = useState<string | null>(null);
    //
    // const [description, setDescription] = useState('');
    // const [title, setTitle] = useState('');
    //
    // const { survey, setSurvey } = useOutletContext<{
    //     survey: ISurvey;
    //     setSurvey: (survey: ISurvey) => void;
    // }>();

    const {surveyId} = useParams<{surveyId: string}>();
    const [survey, setSurvey] = useState<ISurvey | null>(null);
    const [questions, setQuestions] = useState<Question[]>([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        const fetchSurveyData = async () => {
            try {
                setLoading(true);
                if (!surveyId) return;

                const surveyData = await getSurveyById(parseInt(surveyId));
                setSurvey(surveyData);

                const questionsData = await getListQuestions(parseInt(surveyId));
                const formattedQuestions = await Promise.all(questionsData.map(async q => {
                    const answerVariants = await getAnswerVariants(parseInt(surveyId), q.id);
                    return {
                        id: q.id,
                        text: q.title,
                        questionType: q.questionType as 'SingleAnswerQuestion' | 'MultipleAnswerQuestion',
                        answerVariants: answerVariants.map((a: IAnswerVariant) => ({
                            id: a.id,
                            text: a.text
                        }))
                    };
                }));
                setQuestions(formattedQuestions);
            } catch (error) {
                console.error('Ошибка загрузки опроса:', error);
                setError('Не удалось загрузить опрос');
            } finally {
                setLoading(false);
            }
        };

        fetchSurveyData();
    }, [surveyId]);

    if (loading) return <div>Загрузка...</div>;
    if (error) return <div>{error}</div>;
    if (!survey) return <div>Опрос не найден</div>;

    return (
        <div className={styles.survey}>
            <SurveyInfo
                titleSurvey={survey.title}
                descriptionSurvey={survey.description}
                setDescriptionSurvey={(value) => setSurvey({ ...survey, description: value })}
                setTitleSurvey={(value) => setSurvey({ ...survey, title: value })}
            />
            <QuestionsList
                questions={questions}
                setQuestions={setQuestions}
            />
        </div>
    )
}

export default CompletingSurvey