import React from "react";
import { useNavigate } from "react-router-dom";
import "./MainStudent.css";
import AllLineChart from "../../components/chart/AllLineChart";

const MainStudent = () => {
  const navigate = useNavigate();

  const datasets = [
    {
      label: "어휘",
      data: [12, 19, 3, 5, 2, 3, 7],
      borderColor: "rgba(75, 192, 192, 1)",
      fill: false,
    },
    {
      label: "문법",
      data: [2, 3, 20, 5, 1, 4, 9],
      borderColor: "rgba(153, 102, 255, 1)",
      fill: false,
    },
    {
      label: "문장",
      data: [3, 10, 13, 15, 22, 30, 25],
      borderColor: "rgba(255, 159, 64, 1)",
      fill: false,
    },
    {
      label: "이해",
      data: [5, 15, 10, 20, 8, 7, 18],
      borderColor: "rgba(54, 162, 235, 1)",
      fill: false,
    },
    {
      label: "표현",
      data: [1, 4, 6, 8, 10, 12, 14],
      borderColor: "rgba(255, 206, 86, 1)",
      fill: false,
    },
    {
      label: "집중",
      data: [9, 7, 6, 4, 3, 2, 1],
      borderColor: "rgba(75, 192, 192, 0.7)",
      fill: false,
    },
  ];

  const expressionDataset = [
    {
      label: "표현",
      data: [3, 10, 13, 15, 22, 30, 25],
      borderColor: "rgba(255, 159, 64, 1)",
      fill: false,
    },
  ];

  const comprehensionDataset = [
    {
      label: "이해",
      data: [5, 15, 10, 20, 8, 7, 18],
      borderColor: "rgba(54, 162, 235, 1)",
      fill: false,
    },
  ];

  const progress = 60;

  const getProgressBarColor = (progress) => {
    if (progress < 30) {
      return "red";
    } else if (progress < 70) {
      return "orange";
    } else {
      return "green";
    }
  };

  return (
    <>
      <div className="mainstudent-container">
        <div className="mainstudent-chart">
          <div className="mainstudent-chart-left-container">
            <div className="mainstudent-chart-all">
              <AllLineChart datasets={datasets} />
            </div>
          </div>
          <div className="mainstudent-chart-right-container">
            <div className="mainstudent-chart-three-box">
              <div className="mainstudent-chart-three-box-chart">
                <h1 onClick={() => navigate("/")}>학습컨텐츠 가기</h1>
              </div>
            </div>
            <div className="mainstudent-chart-three-box">
              <div className="mainstudent-chart-three-box-chart">
                <AllLineChart datasets={expressionDataset} />
              </div>
            </div>
            <div className="mainstudent-chart-three-box">
              <div className="mainstudent-chart-three-box-chart">
                <AllLineChart datasets={comprehensionDataset} />
              </div>
            </div>
          </div>
        </div>
        <div className="mainstudent-progress-recommend">
          <div className="mainstudent-progress-left-container">
            진행도
            <div className="progress-bar-container">
              <div
                className="progress-bar"
                style={{
                  width: `${progress}%`,
                  backgroundColor: getProgressBarColor(progress),
                }}
              ></div>
            </div>
          </div>
          <div className="mainstudent-recommend-right-container">차트세개</div>
        </div>
      </div>
    </>
  );
};

export default MainStudent;
