import React, { useEffect, useState } from "react";
import { useMarkState } from "../../../../../zustand/MarkState";
import { useGetAllExamTypes } from "../../../../../api/examTypes";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../../../../enums/params";

const FillterNavWithRadio = () => {
  const [activeButton, setActiveButton] = useState<any>(null);
  const { setNavRadio, NavRadio, setHeaderData } = useMarkState(
    (state) => state,
  );

  // Function to handle button click
  const handleButtonClick = (label: any) => {
    setActiveButton(label?.id);
    setNavRadio(label?.id);
    setHeaderData(null);
  };
  const { course_id } = useParams<ParamsEnum>();

  const { data, isLoading } = useGetAllExamTypes({
    course_id: course_id,
  });
  const DataType = data?.data ?? [];
  const DefaultValue = DataType?.[0]?.id ?? null;
  useEffect(() => {
    if (!NavRadio) {
      setActiveButton(DefaultValue);

      setNavRadio(DefaultValue);
    }
  }, [DefaultValue, NavRadio, setActiveButton, setNavRadio]);

  useEffect(() => {
    setActiveButton(NavRadio);
  }, [NavRadio]);
  const [t] = useTranslation();

  if (isLoading) {
    return <Spin />;
  }
  return (
    <div className="FillterNavWithRadio">
      <header>
        {/* <FaArrowRight />  */}
        <span>
          {/* {title}  */}
          {t("header.student_exam")}
        </span>
      </header>
      <span>
        <div className="ButtonTabs">
          {DataType?.map((label: any, index: number) => {
            return (
              <button
                key={index}
                className={
                  activeButton === label?.id ? "Activebutton" : "button"
                }
                onClick={() => handleButtonClick(label)}
              >
                {label?.name}
              </button>
            );
          })}
        </div>
      </span>
    </div>
  );
};

export default FillterNavWithRadio;
