import { useColumns, Table, useTableOnChange, useAddKeyToData } from ".";
import Loading from "../../../Components/DataState/Loading";
import EmptyData from "../../../Components/DataState/EmptyData";
import React from "react";

import { Presence, Student } from "../../../types/Item";
import { useGetAllPresence } from "../../../api/presence";
import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";

const App = ({ student }: { student: Student }) => {
  const [searchQuery] = React.useState<string>("");
  const { param_to_send } = useObjectToEdit();

  const { data, isLoading } = useGetAllPresence({
    content: searchQuery,
    registration_record_id: student?.registration_record_id,
    date: param_to_send?.date,
  });

  const Presence: Presence[] = data?.data || [];
  const columns = useColumns();

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

  interface DayObject {
    date: Date;
  }

  const getDaysInMonth = (
    year: number,
    month: number,
    param_to_send?: { date?: string },
  ): DayObject[] => {
    let targetDate: Date;

    if (
      param_to_send &&
      param_to_send.date &&
      param_to_send?.date !== "today"
    ) {
      targetDate = new Date(param_to_send.date);
    } else {
      targetDate = new Date();
    }

    const targetYear = targetDate.getFullYear();
    const targetMonth = targetDate.getMonth();

    const daysInMonth = new Date(
      Date.UTC(targetYear, targetMonth + 1, 0),
    ).getUTCDate();
    const daysArray: DayObject[] = [];

    for (let i = 1; i <= daysInMonth; i++) {
      const date = new Date(Date.UTC(targetYear, targetMonth, i));

      daysArray.push({ date });
    }

    return daysArray;
  };

  const currentDate = new Date();
  const currentMonth = currentDate.getMonth();
  const currentYear = currentDate.getFullYear();

  const daysInCurrentMonth = getDaysInMonth(
    currentYear,
    currentMonth,
    param_to_send,
  ) as any;
  // console.log(daysInCurrentMonth);

  const presenceMap = new Map();
  for (const presence of Presence) {
    const dateKey = presence.date;
    presenceMap.set(dateKey, presence);
  }

  for (let i = 0; i < daysInCurrentMonth.length; i++) {
    const currentDay = daysInCurrentMonth[i];
    const dateKey = currentDay.date.toISOString().split("T")[0];
    const presence = presenceMap.get(dateKey);
    if (presence) {
      daysInCurrentMonth[i] = presence;
    }
  }
  const [t] = useTranslation();

  const customDataSource = useAddKeyToData(daysInCurrentMonth);

  return (
    <Table
      columns={columns}
      dataSource={customDataSource}
      className="DataTable"
      rowClassName={(record, index) => getRowClassName(record, index)}
      loading={{
        spinning: isLoading,
        indicator: <Loading />,
        size: "large",
      }}
      locale={{
        emptyText: (
          <EmptyData
            loading={isLoading}
            header={t("Table.header")}
            info={t("Table.info")}
          />
        ),
      }}
      onChange={useTableOnChange()}
    />
  );
};

export default App;
