import {
  RecordLeaveInput,
  RecordTimesheetInput,
} from "@/app/api/timesheets/actions";
import React from "react";
import { useFormContext } from "react-hook-form";
import DateHoursList from "../DateHoursTable/DateHoursList";
import { AssignedProject, ProjectWithTasks } from "@/app/api/projects";
import MobileTimesheetEntry from "./MobileTimesheetEntry";
import { HolidaysResult } from "@/app/api/holidays";

interface Props {
  allProjects: ProjectWithTasks[];
  assignedProjects: AssignedProject[];
  leaveRecords: RecordLeaveInput;
  companyHolidays: HolidaysResult[];
  errorComponent?: React.ReactNode;
  fastEntryEnabled?: boolean;
}

const MobileTimesheetTable: React.FC<Props> = ({
  allProjects,
  assignedProjects,
  leaveRecords,
  companyHolidays,
  errorComponent,
  fastEntryEnabled,
}) => {
  const { watch } = useFormContext<RecordTimesheetInput>();
  const currentInput = watch();
  const days = Object.keys(currentInput);

  return (
    <DateHoursList
      days={days}
      companyHolidays={companyHolidays}
      leaveEntries={leaveRecords}
      timesheetEntries={currentInput}
      EntryComponent={MobileTimesheetEntry}
      entryComponentProps={{
        allProjects,
        assignedProjects,
        companyHolidays,
        fastEntryEnabled,
      }}
      errorComponent={errorComponent}
    />
  );
};

export default MobileTimesheetTable;
