import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";

import { selectedTest } from "@redux/quizSlice";

import { Footer } from "@components/Common/Footer/Footer";
import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
import { Navigation } from "@components/Navigation/Navigation";
// import { HeadBottom } from "@components/features/Candidate-lk/HeadBottom";
import { AlertResult } from "@components/features/quiz/AlertResult";
import { QuizReport } from "@components/features/quiz/QuizReport";
import { apiRequest } from "@api/request";

export const QuizReportPage = () => {
  const test = useSelector(selectedTest);
  const params = useParams();

  let navigate = useNavigate();
  if (!test) {
    navigate("/quiz");
  }

  useEffect(() => {
    apiRequest(`/user-questionnaire/questionnaire-completed?user_questionnaire_uuid=${params.uuid}`).then((res) => {
      setTestInfo(res)
    })
  }, [])

  const [testInfo, setTestInfo] = useState({})

  return (
    <div className="quiz-report-page">
      <ProfileHeader />
      <Navigation />
      {/*<HeadBottom />*/}
      <div className="quiz-report-page__container">
        <ProfileBreadcrumbs
          links={[
            { name: "Главная", link: "/profile-candidate" },
            { name: "Тестирование", link: "/quiz" },
            { name: "Отчет по тестированию", link: "/quiz/report" },
          ]}
        />
        <div className="quiz-report-page__title main-title">
          Отчет по тестированию позиции {testInfo.questionnaire_title}
        </div>
        <div className="quiz-report-page__report-quiz">
          <QuizReport info={testInfo} />
        </div>
        <AlertResult info={testInfo} />
      </div>
      <Footer />
    </div>
  );
};