import React from "react";
import {
  Layout,
  List,
  Avatar,
  Button,
  Space,
  Divider,
  Menu,
  Anchor,
} from "antd";
import "antd/dist/antd.css";
import { authenticationService } from "../../../../_services";
import { Siderc } from "../../../Main/Siderc";
import { Headerc } from "../../../Main/Headerc";
import { selectorService } from "../../../../services/selectorService";
// import { Link } from "react-router-dom";
import Plot from "react-plotly.js";
import { DashboardOutlined, PieChartOutlined } from "@ant-design/icons";
import "./Report.css";
const { Content, Sider, Footer } = Layout;

class Report extends React.Component {
  state = {
    currentUser: authenticationService.currentUserValue,
    classes: "1",
    batch: "1",
    data: [],
    total_count: 0,
    total_pages: 0,
    sections: [],
    totalEasyQuestions: 0,
    totalMediumQuestions: 0,
    totalDifficultQuestions: 0,
    easyFullMarks: 0,
    mediumFullMarks: 0,
    difficultFullMarks: 0,
    easyMarksGained: 0,
    mediumMarksGained: 0,
    difficultMarksGained: 0,
    easyArray: [],
    mediumArray: [],
    difficultArray: [],
  };

  componentDidMount() {
    this.handleLoadReportForExam();
  }

  handleLoadReportForExam() {
    selectorService
      .loadReport(this.props.location.state.examId)
      .then((data) => {
        const result = data.result;
        let sections1 = [];
        let total_least_mark = 0;
        let total_max_mark = 0;
        let totalMarksReceived = 0;
        let totalMarks = 0;
        let total_correct_answer = 0;
        let total_wrong_answer = 0;
        let total_notAttempted_answer = 0;
        let totalEasyQuestions = 0,
          totalDifficultQuestions = 0,
          totalMediumQuestions = 0;
        let easyFullMarks = 0,
          mediumFullMarks = 0,
          difficultFullMarks = 0,
          easyMarksGained = 0,
          mediumMarksGained = 0,
          difficultMarksGained = 0;
        let easyArray = [0, 0, 0],
          mediumArray = [0, 0, 0],
          difficultArray = [0, 0, 0];
        for (let index = 0; index < result.sections.length; index++) {
          let section = result.sections[index];

          let totalSectionMarks = 0;
          totalMarks = totalMarks + result.sections[index].total_marks;
          if (total_max_mark < result.sections[index].total_marks) {
            total_max_mark = result.sections[index].total_marks;
          }
          if (total_least_mark > result.sections[index].total_nMarks) {
            total_least_mark = result.sections[index].total_nMarks;
          }

          let questions = result.sections[index].questions;
          for (let index1 = 0; index1 < questions.length; index1++) {
            if (questions[index1].isCorrect) {
              total_correct_answer++;
              totalSectionMarks =
                totalSectionMarks + questions[index1].correct_marks;
            } else if (questions[index1].isAttempted) {
              total_wrong_answer++;
              totalSectionMarks =
                totalSectionMarks - questions[index1].wrong_marks;
            } else {
              total_notAttempted_answer++;
            }
            if (questions[index1].complexity_code === 1) {
              totalEasyQuestions++;
              easyFullMarks += questions[index1].correct_marks;
              if (questions[index1].isCorrect) {
                easyMarksGained += questions[index1].correct_marks;
                easyArray[0]++;
              } else if (
                questions[index1].isAttempted &&
                !questions[index1].isCorrect
              ) {
                easyMarksGained -= questions[index1].wrong_marks;
                easyArray[1]++;
              } else {
                easyArray[2]++;
              }
            } else if (questions[index1].complexity_code === 2) {
              totalMediumQuestions++;
              mediumFullMarks += questions[index1].correct_marks;
              if (questions[index1].isCorrect) {
                mediumMarksGained += questions[index1].correct_marks;
                mediumArray[0]++;
              } else if (
                questions[index1].isAttempted &&
                !questions[index1].isCorrect
              ) {
                mediumMarksGained -= questions[index1].wrong_marks;
                mediumArray[1]++;
              } else mediumArray[2]++;
            } else {
              totalDifficultQuestions++;
              difficultFullMarks += questions[index1].correct_marks;
              if (questions[index1].isCorrect) {
                difficultMarksGained += questions[index1].correct_marks;
                difficultArray[0]++;
              } else if (
                questions[index1].isAttempted &&
                !questions[index1].isCorrect
              ) {
                difficultMarksGained -= questions[index1].wrong_marks;
                difficultArray[1]++;
              } else difficultArray[2]++;
            }
          }

          section.total_correct_answer = total_correct_answer;
          section.total_wrong_answer = total_wrong_answer;
          section.total_notAttempted_answer = total_notAttempted_answer;
          section.totalSectionMarks = totalSectionMarks;
          totalMarksReceived = totalMarksReceived + totalSectionMarks;
          sections1.push(section);
        }
        this.setState({
          examName: result.exam_name,
          sections: sections1,
          totalMarksReceived: totalMarksReceived,
          totalMarks: totalMarks,
          total_least_mark: total_least_mark,
          total_max_mark: total_max_mark,
          total_correct_answer: total_correct_answer,
          total_wrong_answer: total_wrong_answer,
          total_notAttempted_answer: total_notAttempted_answer,
          totalDifficultQuestions,
          totalEasyQuestions,
          totalMediumQuestions,
          easyFullMarks,
          mediumFullMarks,
          difficultFullMarks,
          easyMarksGained,
          mediumMarksGained,
          difficultMarksGained,
          easyArray,
          mediumArray,
          difficultArray,
        });
        console.log(data);
      });
  }
  render() {
    let secNames = [];
    let secMarks = [];
    this.state.sections.map((item, secIndex) => {
      secNames.push(item.subject_name);
      secMarks.push(item.totalSectionMarks);
    });
    let percentage = 0;
    if (this.state.total_correct_answer !== 0) {
      percentage =
        (this.state.total_correct_answer * 100) /
        (this.state.total_correct_answer +
          this.state.total_wrong_answer +
          this.state.total_notAttempted_answer);
    }
    const { Link } = Anchor;
    const { easyArray, mediumArray, difficultArray } = this.state;

    return (
      <Layout>
        <Siderc />
        <Layout>
          <Headerc />
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
            }}
          >
            <Layout className="createExamLayoutHeader">
              {this.state.examName} - Report
            </Layout>

            <Layout className="createExamLayout">
              <Sider style={{ backgroundColor: "white" }}>
                <Anchor>
                  {/* <Link href="#components-anchor-overall" title="Basic demo" />
                  <Link
                    href="#components-anchor-difficulty"
                    title="Static demo"
                  /> */}

                  <Menu
                    mode="inline"
                    onClick={this.handleClick}
                    selectedKeys={[this.state.current]}
                    defaultOpenKeys={["dashboard"]}
                    style={{ height: "100%", borderRight: "1px solid #f0f2f5" }}
                  >
                    <Menu.Item key="Report">
                      <Link
                        href="/report#components-anchor-overall"
                        title="Overall"
                      />
                      {/* Overall
                      </Link> */}
                    </Menu.Item>

                    <Menu.Item key="10">
                      {" "}
                      <Link
                        href="/report#components-anchor-difficulty"
                        title="Difficulty Levels"
                      />
                      {/* Difficulty Levels
                      </Link> */}
                    </Menu.Item>
                    <Menu.Item key="11">
                      {" "}
                      <Link
                        href="/report#components-anchor-answer"
                        title="Answer Key"
                      />
                      {/* Answer Key
                      </Link> */}
                    </Menu.Item>
                  </Menu>
                </Anchor>
              </Sider>
              <Layout>
                <Content>
                  <div
                    id="components-anchor-overall"
                    className="OverallReport anchor"
                  >
                    <h2 style={{ padding: "24px 50px" }}>Overall</h2>
                    <table>
                      <tbody>
                        <tr>
                          <td>
                            <div className="PlotCard" style={{ margin: "10%" }}>
                              <div className="ReportPlotHeader">
                                <div>
                                  <DashboardOutlined />
                                  Score
                                </div>
                                <div>
                                  {this.state.totalMarksReceived}/
                                  {this.state.totalMarks}
                                </div>
                              </div>
                              <div className="ReportPlot">
                                <Plot
                                  data={[
                                    {
                                      type: "bar",
                                      x: secNames,
                                      y: secMarks,
                                      orientation: "v",
                                    },
                                  ]}
                                  layout={{
                                    width: 350,
                                    yaxis: {
                                      range: [
                                        this.state.total_least_mark,
                                        this.state.total_max_mark,
                                      ],
                                    },
                                    showlegend: false,
                                    height: 274,
                                    title: () => (
                                      <div>
                                        <div>
                                          <DashboardOutlined />
                                          Score
                                        </div>
                                        <div>
                                          {this.state.totalMarksReceived}/
                                          {this.state.totalMarks}
                                        </div>
                                      </div>
                                    ),
                                  }}
                                  config={{ displayModeBar: false }}
                                />{" "}
                              </div>
                            </div>
                          </td>
                          <td>
                            <div
                              className="PlotCard"
                              style={{ marginLeft: "15%" }}
                            >
                              <div className="ReportPlotHeader">
                                <div>
                                  <PieChartOutlined />
                                  Accuracy
                                </div>
                                <div>{percentage}%</div>
                              </div>
                              <div className="ReportPlot">
                                <Plot
                                  data={[
                                    {
                                      type: "pie",
                                      values: [
                                        this.state.total_correct_answer,
                                        this.state.total_wrong_answer,
                                        this.state.total_notAttempted_answer,
                                      ],
                                      labels: [
                                        "Correct",
                                        "Incorrect",
                                        "Not Attempted",
                                      ],
                                    },
                                  ]}
                                  layout={{
                                    width: 350,
                                    yaxis: {
                                      range: [
                                        this.state.total_least_mark,
                                        this.state.total_max_mark,
                                      ],
                                    },
                                    showlegend: false,
                                    height: 274,
                                  }}
                                  config={{ displayModeBar: false }}
                                />{" "}
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </Content>
                <Footer
                  id="components-anchor-difficulty"
                  style={{
                    backgroundColor: "white",
                    padding: "0",
                    marginTop: "3%",
                  }}
                >
                  <h2 className="anchor">Difficulty Levels</h2>
                  <p>
                    Performance across questions of different difficulty levels
                    like Easy, Medium & Hard
                  </p>
                  <div className="OverallReport">
                    <table>
                      <tbody>
                        <tr>
                          <td>
                            <div
                              className="PlotCard"
                              style={{ margin: "10%", boxSizing: "border-box" }}
                            >
                              <h3>Easy</h3>
                              <div className="ReportPlotHeader">
                                {this.state.totalEasyQuestions + " Questions"}
                                <br />
                                <hr
                                  style={{
                                    color: "black",
                                    backgroundColor: "black",
                                    height: 5,
                                  }}
                                />
                                <div>
                                  <DashboardOutlined />
                                  Score
                                </div>
                                <div>
                                  {this.state.easyMarksGained}/
                                  {this.state.easyFullMarks}
                                </div>
                              </div>
                              <div style={{ position: "relative" }}>
                                <br />
                                <h3
                                  style={{
                                    width: "50%",
                                    margin: "0",
                                    float: "left",
                                  }}
                                >
                                  <strong> Accuracy</strong>
                                </h3>
                                <div
                                  style={{
                                    float: "right",
                                  }}
                                >
                                  {(
                                    (easyArray[0] /
                                      (easyArray[0] +
                                        easyArray[1] +
                                        easyArray[2])) *
                                    100
                                  ).toFixed(2)}
                                  %
                                </div>
                              </div>
                              <div className="ReportPlot">
                                <Plot
                                  data={[
                                    {
                                      type: "bar",
                                      x: ["Correct", "Incorrect", "Not Ans"],
                                      y: easyArray,
                                      orientation: "v",
                                    },
                                  ]}
                                  layout={{
                                    width: 250,
                                    yaxis: {
                                      range: [0, this.state.easyFullMarks + 1],
                                    },
                                    showlegend: false,
                                    height: 274,
                                    title: () => (
                                      <div>
                                        <div>
                                          <DashboardOutlined />
                                          Score
                                        </div>
                                        <div>
                                          {this.state.totalMarksReceived}/
                                          {this.state.totalMarks}
                                        </div>
                                      </div>
                                    ),
                                  }}
                                  config={{ displayModeBar: false }}
                                />{" "}
                              </div>
                            </div>
                          </td>
                          <td>
                            <div
                              className="PlotCard"
                              style={{ margin: "10%", boxSizing: "border-box" }}
                            >
                              <h3>Medium</h3>
                              <div className="ReportPlotHeader">
                                {this.state.totalMediumQuestions + " Questions"}
                                <br />
                                <hr
                                  style={{
                                    color: "black",
                                    backgroundColor: "black",
                                    height: 5,
                                  }}
                                />
                                <div>
                                  <DashboardOutlined />
                                  Score
                                </div>
                                <div>
                                  {this.state.mediumMarksGained}/
                                  {this.state.mediumFullMarks}
                                </div>
                              </div>
                              <div style={{ position: "relative" }}>
                                <br />
                                <h3
                                  style={{
                                    width: "50%",
                                    margin: "0",
                                    float: "left",
                                  }}
                                >
                                  <strong> Accuracy</strong>
                                </h3>
                                <div
                                  style={{
                                    float: "right",
                                  }}
                                >
                                  {(
                                    (mediumArray[0] /
                                      (mediumArray[0] +
                                        mediumArray[1] +
                                        mediumArray[2])) *
                                    100
                                  ).toFixed(2)}
                                  %
                                </div>
                              </div>
                              <div className="ReportPlot">
                                <Plot
                                  data={[
                                    {
                                      type: "bar",
                                      x: ["Correct", "Incorrect", "Not Ans"],
                                      y: mediumArray,
                                      orientation: "v",
                                    },
                                  ]}
                                  layout={{
                                    width: 250,
                                    yaxis: {
                                      range: [
                                        0,
                                        this.state.mediumFullMarks + 1,
                                      ],
                                    },
                                    showlegend: false,
                                    height: 274,
                                    title: () => (
                                      <div>
                                        <div>
                                          <DashboardOutlined />
                                          Score
                                        </div>
                                        <div>
                                          {this.state.totalMarksReceived}/
                                          {this.state.totalMarks}
                                        </div>
                                      </div>
                                    ),
                                  }}
                                  config={{ displayModeBar: false }}
                                />{" "}
                              </div>
                            </div>
                          </td>
                          <td>
                            <div
                              className="PlotCard"
                              style={{ margin: "10%", boxSizing: "border-box" }}
                            >
                              <h3>Hard</h3>
                              <div className="ReportPlotHeader">
                                {this.state.totalDifficultQuestions +
                                  " Questions"}
                                <br />
                                <hr
                                  style={{
                                    color: "black",
                                    backgroundColor: "black",
                                    height: 5,
                                  }}
                                />
                                <div>
                                  <DashboardOutlined />
                                  Score
                                </div>
                                <div>
                                  {this.state.difficultMarksGained}/
                                  {this.state.difficultFullMarks}
                                </div>
                              </div>
                              <div style={{ position: "relative" }}>
                                <br />
                                <h3
                                  style={{
                                    width: "50%",
                                    margin: "0",
                                    float: "left",
                                  }}
                                >
                                  <strong> Accuracy</strong>
                                </h3>
                                <div
                                  style={{
                                    float: "right",
                                  }}
                                >
                                  {(
                                    (difficultArray[0] /
                                      (difficultArray[0] +
                                        difficultArray[1] +
                                        difficultArray[2])) *
                                    100
                                  ).toFixed(2)}
                                  %
                                </div>
                              </div>
                              <div className="ReportPlot">
                                <Plot
                                  data={[
                                    {
                                      type: "bar",
                                      x: ["Correct", "Incorrect", "Not Ans"],
                                      y: difficultArray,
                                      orientation: "v",
                                    },
                                  ]}
                                  layout={{
                                    width: 250,
                                    yaxis: {
                                      range: [
                                        0,
                                        this.state.difficultFullMarks + 1,
                                      ],
                                    },
                                    showlegend: false,
                                    height: 274,
                                    title: () => (
                                      <div>
                                        <div>
                                          <DashboardOutlined />
                                          Score
                                        </div>
                                        <div>
                                          {this.state.totalMarksReceived}/
                                          {this.state.totalMarks}
                                        </div>
                                      </div>
                                    ),
                                  }}
                                  config={{ displayModeBar: false }}
                                />{" "}
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </Footer>
                <Footer
                  id="components-anchor-answer"
                  style={{
                    backgroundColor: "white",
                    padding: "0",
                    marginTop: "5%",
                  }}
                >
                  <h2 className="anchor">Answer Key</h2>
                  <p>
                    Performance across questions of different difficulty levels
                    like Easy, Medium & Hard
                  </p>
                  <div className="OverallReport">
                    <table>
                      <tbody>
                        <tr>
                          <td>
                            <div
                              className="PlotCard"
                              style={{ margin: "10%", boxSizing: "border-box" }}
                            >
                              <h3>Easy</h3>
                              <div className="ReportPlotHeader">
                                {this.state.totalEasyQuestions + " Questions"}
                                <br />
                                <hr
                                  style={{
                                    color: "black",
                                    backgroundColor: "black",
                                    height: 5,
                                  }}
                                />
                                <div>
                                  <DashboardOutlined />
                                  Score
                                </div>
                                <div>
                                  {this.state.easyMarksGained}/
                                  {this.state.easyFullMarks}
                                </div>
                              </div>
                              <div style={{ position: "relative" }}>
                                <br />
                                <h3
                                  style={{
                                    width: "50%",
                                    margin: "0",
                                    float: "left",
                                  }}
                                >
                                  <strong> Accuracy</strong>
                                </h3>
                                <div
                                  style={{
                                    float: "right",
                                  }}
                                >
                                  {(
                                    (easyArray[0] /
                                      (easyArray[0] +
                                        easyArray[1] +
                                        easyArray[2])) *
                                    100
                                  ).toFixed(2)}
                                  %
                                </div>
                              </div>
                              <div className="ReportPlot">
                                <Plot
                                  data={[
                                    {
                                      type: "bar",
                                      x: ["Correct", "Incorrect", "Not Ans"],
                                      y: easyArray,
                                      orientation: "v",
                                    },
                                  ]}
                                  layout={{
                                    width: 250,
                                    yaxis: {
                                      range: [0, this.state.easyFullMarks + 1],
                                    },
                                    showlegend: false,
                                    height: 274,
                                    title: () => (
                                      <div>
                                        <div>
                                          <DashboardOutlined />
                                          Score
                                        </div>
                                        <div>
                                          {this.state.totalMarksReceived}/
                                          {this.state.totalMarks}
                                        </div>
                                      </div>
                                    ),
                                  }}
                                  config={{ displayModeBar: false }}
                                />{" "}
                              </div>
                            </div>
                          </td>
                          <td>
                            <div
                              className="PlotCard"
                              style={{ margin: "10%", boxSizing: "border-box" }}
                            >
                              <h3>Medium</h3>
                              <div className="ReportPlotHeader">
                                {this.state.totalMediumQuestions + " Questions"}
                                <br />
                                <hr
                                  style={{
                                    color: "black",
                                    backgroundColor: "black",
                                    height: 5,
                                  }}
                                />
                                <div>
                                  <DashboardOutlined />
                                  Score
                                </div>
                                <div>
                                  {this.state.mediumMarksGained}/
                                  {this.state.mediumFullMarks}
                                </div>
                              </div>
                              <div style={{ position: "relative" }}>
                                <br />
                                <h3
                                  style={{
                                    width: "50%",
                                    margin: "0",
                                    float: "left",
                                  }}
                                >
                                  <strong> Accuracy</strong>
                                </h3>
                                <div
                                  style={{
                                    float: "right",
                                  }}
                                >
                                  {(
                                    (mediumArray[0] /
                                      (mediumArray[0] +
                                        mediumArray[1] +
                                        mediumArray[2])) *
                                    100
                                  ).toFixed(2)}
                                  %
                                </div>
                              </div>
                              <div className="ReportPlot">
                                <Plot
                                  data={[
                                    {
                                      type: "bar",
                                      x: ["Correct", "Incorrect", "Not Ans"],
                                      y: mediumArray,
                                      orientation: "v",
                                    },
                                  ]}
                                  layout={{
                                    width: 250,
                                    yaxis: {
                                      range: [
                                        0,
                                        this.state.mediumFullMarks + 1,
                                      ],
                                    },
                                    showlegend: false,
                                    height: 274,
                                    title: () => (
                                      <div>
                                        <div>
                                          <DashboardOutlined />
                                          Score
                                        </div>
                                        <div>
                                          {this.state.totalMarksReceived}/
                                          {this.state.totalMarks}
                                        </div>
                                      </div>
                                    ),
                                  }}
                                  config={{ displayModeBar: false }}
                                />{" "}
                              </div>
                            </div>
                          </td>
                          <td>
                            <div
                              className="PlotCard"
                              style={{ margin: "10%", boxSizing: "border-box" }}
                            >
                              <h3>Hard</h3>
                              <div className="ReportPlotHeader">
                                {this.state.totalDifficultQuestions +
                                  " Questions"}
                                <br />
                                <hr
                                  style={{
                                    color: "black",
                                    backgroundColor: "black",
                                    height: 5,
                                  }}
                                />
                                <div>
                                  <DashboardOutlined />
                                  Score
                                </div>
                                <div>
                                  {this.state.difficultMarksGained}/
                                  {this.state.difficultFullMarks}
                                </div>
                              </div>
                              <div style={{ position: "relative" }}>
                                <br />
                                <h3
                                  style={{
                                    width: "50%",
                                    margin: "0",
                                    float: "left",
                                  }}
                                >
                                  <strong> Accuracy</strong>
                                </h3>
                                <div
                                  style={{
                                    float: "right",
                                  }}
                                >
                                  {(
                                    (difficultArray[0] /
                                      (difficultArray[0] +
                                        difficultArray[1] +
                                        difficultArray[2])) *
                                    100
                                  ).toFixed(2)}
                                  %
                                </div>
                              </div>
                              <div className="ReportPlot">
                                <Plot
                                  data={[
                                    {
                                      type: "bar",
                                      x: ["Correct", "Incorrect", "Not Ans"],
                                      y: difficultArray,
                                      orientation: "v",
                                    },
                                  ]}
                                  layout={{
                                    width: 250,
                                    yaxis: {
                                      range: [
                                        0,
                                        this.state.difficultFullMarks + 1,
                                      ],
                                    },
                                    showlegend: false,
                                    height: 274,
                                    title: () => (
                                      <div>
                                        <div>
                                          <DashboardOutlined />
                                          Score
                                        </div>
                                        <div>
                                          {this.state.totalMarksReceived}/
                                          {this.state.totalMarks}
                                        </div>
                                      </div>
                                    ),
                                  }}
                                  config={{ displayModeBar: false }}
                                />{" "}
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </Footer>
              </Layout>
            </Layout>
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default Report;
