"use client";

import { envConfig } from "@/app/lib/config";
import { useEffect, useState } from "react";
import TableSanction from "../BitacoraSanciones/TableSanction";
import { Alumno, AlumnoSancion } from "@/app/types/sanction";
import axios from "axios";

function QuitarSancion({ id_cuenta }: { id_cuenta: number }) {
  const [alumno, setAlumno] = useState<Alumno>();
  const [alumnoSanciones, setAlumnoSanciones] = useState<AlumnoSancion[]>([]);

  const fetchAlumnoSanciones = async () => {
    try {
      const res = await axios.get(
        `${envConfig.apiUrl}/alumno-sancion/${id_cuenta}`
      );

      setAlumno(res.data.student ?? null);
      setAlumnoSanciones(res.data.alusancion ?? []);
    } catch {
    }
  };

  useEffect(() => {
    if (!id_cuenta) return;

    fetchAlumnoSanciones();

  }, [id_cuenta]);

  const handleButton = async (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    await axios.delete(`${envConfig.apiUrl}/alumno-sancion/${id_cuenta}`)
    setAlumnoSanciones([])
  }

  return (
    <section className="containerSection">
      <TableSanction alumnoSanciones={alumnoSanciones} alumno={alumno} />
      {(alumnoSanciones?.length > 0) &&
        <button
          className="button buttonSearch"
          style={{ margin: "1rem 0" }}
          onClick={handleButton}
        >
          Quitar sancion
        </button>
      }
    </section>
  );
}

export default QuitarSancion;