import React, { useState } from "react";
import "./MainTeacher2.css";
import AllLineChart from "../../components/chart/AllLineChart";

const MainTeacher2 = () => {
  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 [selectedDataset, setSelectedDataset] = useState(datasets);
  const handleButtonClick = (dataset) => {
    switch (dataset) {
      case "전체성적":
        setSelectedDataset(datasets);
        break;
      case "이해성적":
        setSelectedDataset(comprehensionDataset);
        break;
      case "표현성적":
        setSelectedDataset(expressionDataset);
        break;
      default:
        setSelectedDataset(datasets);
        break;
    }
  };

  return (
    <div className="main-teacher-container-2">
      <h2>교사 전용 페이지</h2>
      <div className="main-teacher-top-container-2">
        <div className="main-student-top-chart-2">
          <h2>이기창 학생</h2>
          <AllLineChart datasets={selectedDataset} />
          <div className="main-student-comment-container">
            <input className="main-student-comment"></input>
            <button className="main-student-comment-button">댓글달기</button>
          </div>
        </div>
        <div className="main-teacher-top-buttons-2">
          <div
            className="main-teacher-top-button"
            onClick={() => handleButtonClick("전체성적")}
          >
            전체성적
          </div>
          <div
            className="main-teacher-top-button"
            onClick={() => handleButtonClick("이해성적")}
          >
            이해성적
          </div>
          <div
            className="main-teacher-top-button"
            onClick={() => handleButtonClick("표현성적")}
          >
            표현성적
          </div>
        </div>
        <div className="main-student-list">
          <div className="main-student-name">이기창</div>
          <div className="main-student-name">전승기</div>
          <div className="main-student-name">정채연</div>
          <div className="main-student-name">권상웅</div>
        </div>
      </div>
    </div>
  );
};

export default MainTeacher2;