current2

import { PostAddOutlined } from "@material-ui/icons";
import { isEmpty, set } from "lodash";
import React, { useState } from "react";
import { alignPropType } from "react-bootstrap/esm/DropdownMenu";
import { useSelector } from "react-redux";
import { Redirect, useHistory, useParams } from "react-router";
import wrongSign from "../../assets/images/wrongSign.png";
import trophy from "../../assets/images/trophy.jpg";

import {
  answersheet,
  examStandings,
  mainpage,
  RESPONSE,
} from "../../constants/constants";
import { resultDetails } from "../../urls";
import AnsSheet from "./AnsSheet/AnsSheet";
import Standings from "./Standings/Standings";

import LoaderComponent from "../../Components/LoaderComponent/LoaderComponent";

import ChartsPage from "../../Components/ChartsPage/ChartsPage";

const ResultDetails = () => {
  const { id, page, from } = useParams();

  const [currentPage, setCurrentPage] = useState(mainpage);

  const resultinitData = useSelector((state) => state.initData.results[id]);

  const resultresponse = useSelector((state) => state.submitAnsResponse);

  let allExams = [...useSelector((state) => state.initData.exams)];

  let archievedExam = useSelector((state) => state.archievedData.exams);

  if (archievedExam != undefined) allExams = [...allExams, ...archievedExam];

  const history = useHistory();

  const pageChange = (Page) => {
    setCurrentPage(Page);

    history.replace(resultDetails(id, Page, from));
  };

  let result,
    statistics = {},
    passed_examinees = 0,
    total_examinees = 0,
    cut_mark = 0,
    marks = 0,
    incorrect_answers = 0,
    correct_answers = 0,
    skippedCount = 0;

  if (from == RESPONSE) {
    result = resultresponse;
    statistics = result.statistics;
  } else {
    result = resultinitData;
    statistics = result.exam_data.statistics;
  }

  if (isEmpty(result) || result == undefined) {
    return <LoaderComponent />;
  }

  let standings = [];

  if (from != RESPONSE) {
    standings = result.exam_data.statistics.standings;

    passed_examinees = statistics.passed_examinees;
    total_examinees = statistics.total_examinees;
    cut_mark = statistics.cut_mark;
  } else {
    if (result.exam_data != undefined) {
      standings = result.exam_data.statistics.standings;
    }
  }

  if (from == RESPONSE) {
    let mp = {};

    if (result.answer_sheet != undefined) {
      result.answer_sheet.forEach((ans) => {
        mp[ans.question] = ans.answers[0];
      });

      const currentQuestion = allExams.filter((ex) => ex.id == id)[0].questions;

      let newAnswerSheet = [];

      currentQuestion.forEach((que) => {
        if (mp[que] != undefined)
          newAnswerSheet.push({
            answers: [mp[que]],
            question: que,
          });
        else
          newAnswerSheet.push({
            answers: [],
            question: que,
          });
      });

      result = { ...result, ["answer_sheet"]: newAnswerSheet };
    }
  }

  if (result != undefined && result.answer_sheet != undefined) {
    marks = result.statistics.marks;
    incorrect_answers = result.statistics.incorrect_answers;
    correct_answers = result.statistics.correct_answers;
    skippedCount =
      result.answer_sheet.length - (incorrect_answers + correct_answers);
  }

  const pageCheck = (newPage) => newPage == currentPage;

  const standingAvailable = () =>
    (standings != undefined && standings != null && standings.length > 0) ==
    true;

  console.log(result);

  const checkPosition = () => {
    if (
      result == undefined ||
      result.statistics == undefined ||
      result.statistics.position == undefined ||
      result.statistics.position == "N/A"
    )
      return false;

    return true;
  };

  const PassFailRemark = () => {
    if (
      result == undefined ||
      result.statistics == undefined ||
      result.statistics.grade == undefined ||
      result.statistics.grade == "fail"
    )
      return "আপনি অনুত্তীর্ণ হয়েছেন";
    else return "আপনি উত্তীর্ণ হয়েছেন";
  };

  const passFailBorderColor = () => {
    if (
      result == undefined ||
      result.statistics == undefined ||
      result.statistics.grade == undefined ||
      result.statistics.grade == "fail"
    )
      return { border: "4px solid red" };

    return {};
  };

  const PassOrFaillImage = () => {
    if (
      result == undefined ||
      result.statistics == undefined ||
      result.statistics.grade == undefined ||
      result.statistics.grade == "fail"
    )
      return (
        <img style={{ width: "150px", height: "150px" }} src={wrongSign}></img>
      );

    return <img style={{ width: "170px", height: "170px" }} src={trophy}></img>;
  };

  return (
    <div  >
      {currentPage == mainpage && (


        <div >
          <div
            style={{ marginTop: "20px" }}

          >
            <div style={{ margin: "20px" }}>
              <PassOrFaillImage />
            </div>

            <div
              style={{
                padding: "30px",
                border: "4px solid green",
                borderRadius: "20px",
                color: "grey",
                ...passFailBorderColor(),
              }}
            >
              <div style={{ fontSize: "20px" }}> {result.remarks}</div>

              <div style={{ marginTop: "20px", fontSize: "28px" }}>
                <PassFailRemark />

                {checkPosition() && (
                  <span> আপনার অবস্থান {result.statistics.position} </span>
                )}
              </div>
            </div>
          </div>

        <div
            style={{
              paddingTop: "10px",
              padding: "100px 0px 100px 100px",
              fontSize: "45px",
            }}

          >
            <div className="row">
              <div className="col-md-5">আপনার মার্কস</div>
              <div className="col-md-2">:</div>
              <div className="col-md-3">

                <div
                  style={{
                    backgroundColor: "#4067B2",
                    color: "white",
                    width: "150px",
                  }}
                >
                  {marks}
                </div>
              </div>
            </div>

            {from != RESPONSE && (
              <div>

                <div className="row" style={{ paddingTop: "10px" }}>
                  <div className="col-md-5">কাট মার্ক</div>
                  <div className="col-md-2">:</div>
                  <div className="col-md-3">
                    <div
                      style={{
                        backgroundColor: "#4067B2",
                        color: "white",
                        width: "150px",
                      }}
                    >
                      {cut_mark}
                    </div>
                  </div>
                </div>

                <div className="row" style={{ paddingTop: "10px" }}>
                  <div className="col-md-5">মোট পরীক্ষার্থী সংখ্যা</div>
                  <div className="col-md-2">:</div>
                  <div className="col-md-3">

                    <div
                      style={{
                        backgroundColor: "#4067B2",
                        color: "white",
                        width: "150px",
                      }}
                    >
                      {total_examinees}
                    </div>
                  </div>
                </div>

                <div className="row" style={{ paddingTop: "10px" }}>
                  <div className="col-md-5">উত্তীর্ণ পরীক্ষার্থীর সংখ্যা</div>
                  <div className="col-md-2">:</div>
                  <div className="col-md-3">

                    <div
                      style={{
                        backgroundColor: "#4067B2",
                        color: "white",
                        width: "150px",
                      }}
                    >
                      {passed_examinees}
                    </div>
                  </div>
                </div>




              </div>



                    )}




            <div
              className="row"
              style={{ marginTop: "50px" }}
            >
              <ChartsPage
                skippedCount={skippedCount}
                correct_answers={correct_answers}
                incorrect_answers={incorrect_answers}
              />
            </div>
            <div className="row">
              <div className="col-md-5">
                <button
                  style={{
                    border: "none",
                    backgroundColor: "white",
                    color: "black",
                    height: "70px",
                    width: "250px",
                  }}
                >
                  <img
                    style={{ height: "35px", width: "35px" }}
                    // src={grade}
                  ></img>
                  <span style={{ fontSize: "20px", paddingLeft: "5px" }}>
                    Result
                  </span>
                </button>
              </div>
              <div className="col-md-4">Fahim</div>
            </div>
          </div>


        </div>
      )




      }




      {pageCheck(examStandings) && (
        <Standings standings={standings} userPos={result.statistics.position} />
      )}

      {pageCheck(answersheet) && <AnsSheet result={result} />}
    </div>
  );
};

export default ResultDetails;