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

interface Props {
  leaveTypes: LeaveType[];
  timesheetRecords: RecordTimesheetInput;
  companyHolidays: HolidaysResult[];
  errorComponent?: React.ReactNode;
}

const MobileLeaveTable: React.FC<Props> = ({
  timesheetRecords,
  leaveTypes,
  companyHolidays,
  errorComponent,
}) => {
  const { watch } = useFormContext<RecordLeaveInput>();
  const currentInput = watch();
  const days = Object.keys(currentInput);

  return (
    <DateHoursList
      days={days}
      companyHolidays={companyHolidays}
      leaveEntries={currentInput}
      timesheetEntries={timesheetRecords}
      EntryComponent={MobileLeaveEntry}
      entryComponentProps={{ leaveTypes, companyHolidays }}
      errorComponent={errorComponent}
    />
  );
};

export default MobileLeaveTable;
