import { useAddKeyToData, useColumns, Table, useTableOnChange } from ".";
import Loading from "../../../../../Components/DataState/Loading";
import EmptyData from "../../../../../Components/DataState/EmptyData";
import { useLocation, useParams } from "react-router-dom";
import { Student } from "../../../../../types/Item";
import React from "react";
import { useGetAllStudent } from "../../../../../api/student";
import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";

const TablePage: React.FC = () => {
  const { edu_class_id } = useParams();
  const [searchQuery, setSearchQuery] = React.useState<string>("");
  const location = useLocation();

  /// first_name
  React.useEffect(() => {
    const searchParams = new URLSearchParams(location?.search);
    setSearchQuery(searchParams?.get("name") || "");
    // console.log(searchQuery,"searchQuery");
  }, [location, searchQuery]);

  const { data, isLoading } = useGetAllStudent({
    name: searchQuery,
    edu_class_id: edu_class_id,
  });

  const students: Student[] = data?.data || [];
  const dataSource = useAddKeyToData(students);
  const columns = useColumns();

  const getRowClassName = (record: any, index: number): string => {
    return index % 2 === 0 ? "even-row" : "odd-row";
  };

  return (
    <Table<Student>
      columns={columns}
      dataSource={dataSource}
      className="DataTable"
      rowClassName={(record, index) => getRowClassName(record, index)}
      loading={{
        spinning: isLoading,
        indicator: <Loading />,
        size: "large",
      }}
      locale={{
        emptyText: (
          <EmptyData
            loading={isLoading}
            header="لا يوجد ملاحظات في هذا الشهر"
            info="قم بتحديد شهر آخر للعثور على نتائج"
          />
        ),
      }}
    />
  );
};

export default TablePage;
