import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";

import { fetchResultTest, selectResult, selectedTest } from "@redux/quizSlice";

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

import { Loader } from "@components/common/Loader/Loader";

export const Results = () => {
  const result = useSelector(selectResult);
  const test = useSelector(selectedTest);
  const [maxScore, setMaxScore] = useState("");
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchResultTest(test.uuid));
    apiRequest(
      `/user-questionnaire/get-points-number?user_questionnaire_uuid=${test.uuid}`
    ).then((res) => setMaxScore(res.sum_point));
  }, [apiRequest, dispatch, test]);

  return (
    <div className={"result _container"}>
      {!result ? (
        <Loader />
      ) : (
        <div className="result__body">
          <div className="result__text">Благодарим за прохождение теста</div>
          <div className="result__text">
            Ваш Результат: <span className="result__score">{result.score}</span>{" "}
            из {maxScore}{" "}
          </div>
        </div>
      )}
    </div>
  );
};