import React from "react";
import GenerateMonthlyWorkHoursReportLoading from "./GenerateMonthlyWorkHoursReportLoading";
import GenerateMonthlyWorkHoursReport from "./GenerateMonthlyWorkHoursReport";
import { fetchStaff } from "@/app/api/staff";
import { getServerSession } from "next-auth";
import { authOptions } from "@/config/authConfig";
import { TEAM_LEAD } from "@/middleware";
import { fetchHolidays } from "@/app/api/holidays";
import { convertDateArrayToString } from "@/app/utils/formatUtil";
interface SubComponents {
  Loading: typeof GenerateMonthlyWorkHoursReportLoading;
}

const GenerateMonthlyWorkHoursReportWrapper: React.FC &
  SubComponents = async () => {
  const session: any = await getServerSession(authOptions);
  const teamId = session.staff?.teamId;
  const role = session.role;

  const companyHolidays = await fetchHolidays()
  let companyHolidaysList: String[] = []
  if (companyHolidays.length > 0) {
    companyHolidaysList = companyHolidays.map(item => convertDateArrayToString(item.date, "DD/MM/YYYY")) as String[]
  }
  console.log(companyHolidaysList)
  let staffs = await fetchStaff();

  if (role.includes(TEAM_LEAD)) {
    staffs = staffs.filter((staff) => staff.teamId === teamId);
  }

  return <GenerateMonthlyWorkHoursReport staffs={staffs} companyHolidays={companyHolidaysList} />;
};

GenerateMonthlyWorkHoursReportWrapper.Loading = GenerateMonthlyWorkHoursReportLoading;

export default GenerateMonthlyWorkHoursReportWrapper;
