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

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

import { apiRequest } from "@api/request";

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

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

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

  const [testInfo, setTestInfo] = useState({});
  const [loader, setLoader] = useState(false);

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

  return (
    <div className="quiz-report-page">
      <ProfileHeader />
      <Navigation />
      {/*<HeadBottom />*/}
      <div className="quiz-report-page__container">
        <ProfileBreadcrumbs
          links={[
            { name: "Главная", link: "/profile-candidate" },
            { name: "Тестирование", link: "/profile/quiz" },
            { name: "Отчет по тестированию", link: "/profile/quiz" }
          ]}
        />
        {loader ? (
          <Loader />
        ) : (
          <>
            <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>
  );
};
