import React from "react";
import { getColorName } from "../../Hooks/usePercentage";
import { useNavigate, useParams } from "react-router-dom";
import { useGetStudent } from "../../api/student";
import { Student } from "../../types/Item";
import { useTranslation } from "react-i18next";

interface StudentTimeData {
  id: number;
  absences: number;
  justified: number;
  unjustified: number;
  totalDays: number;
  name: string;
}

const StudentsTime = () => {
  const { student_id } = useParams();
  const { data: studentData } = useGetStudent({
    show: student_id,
  });

  const userData: Student | {} = studentData?.data ?? {};

  const { ealryDeparture, absence, lateArrival } = userData as Student;
  const [t] = useTranslation();
  const data = [
    {
      name: t("models.absence"),
      id: 1,
      absences: absence?.justified + absence?.not_justified,
      justified: absence?.justified,
      unjustified: absence?.not_justified,
      totalDays: absence?.total,
    },
    {
      name: t("models.late_arrival"),
      id: 2,
      absences: lateArrival?.justified + lateArrival?.not_justified,
      justified: lateArrival?.justified,
      unjustified: lateArrival?.not_justified,
      totalDays: lateArrival?.total,
    },
    {
      name: t("models.earlyDeparture"),
      id: 3,
      absences: ealryDeparture?.justified + ealryDeparture?.not_justified,
      justified: ealryDeparture?.justified,
      unjustified: ealryDeparture?.not_justified,
      totalDays: ealryDeparture?.total,
    },
  ];
  const navigate = useNavigate();
  const handel_naviagate = () => {
    navigate(`status`);
  };
  return (
    <div className="StudentsTime">
      <header>{t("header.student_status")}</header>
      <main>
        {data?.length > 0 &&
          data.map((item: StudentTimeData, index: number) => {
            return (
              <article key={item.id} onClick={handel_naviagate}>
                <span>
                  <h6>{item?.name}</h6>
                  <p data-color={getColorName(item.absences)}>
                    {item.absences}
                  </p>
                </span>
                <div>
                  <span>
                    <div>
                      {t("select.Student_Type.justified")}
                      <span>{item.justified}</span>
                    </div>
                    <div>
                      {t("select.Student_Type.not_justified")}
                      <span>{item.unjustified}</span>
                    </div>
                  </span>
                  <span>
                    <div className="StudentsTimeTotal">المجموع</div>
                    <p>
                      {item.absences} من {item.totalDays} يوم
                    </p>
                  </span>
                </div>
              </article>
            );
          })}
      </main>
    </div>
  );
};

export default StudentsTime;
