// importing
import ReactPaginate from 'react-paginate';

// handling the pagination
const [page, setPage] = useState(0);
const handlePageClick = (num) => {
  setPage(num);
};

// fetching all the employee details from the mongoDB database
const [loadedEmployees, setLoadedEmployees] = useState();
useEffect(() => {
  const fetchEmployees = async () => {
    try {
      const responseData = await sendRequest(
        `http://localhost:5000/api/employees/emp?page=${page}`
      );
      setLoadedEmployees(responseData.employees);
    } catch (err) {
      console.log("Error in fetching employees: "+err);
    }
  };
  fetchEmployees();
}, [sendRequest, page]);


// returning this component
<ReactPaginate
  containerClassName="flex gap-2 justify-center mt-4"
  pageClassName="text-gray-500"
  activeClassName="text-gray-900 border-2 border-black px-2"
  previousClassName="text-gray-500"
  nextClassName="text-gray-500"
  breakLabel="..."
  nextLabel="next >"
  onPageChange={(selected) => handlePageClick(selected.selected + 1)}
  pageRangeDisplayed={2}
  marginPagesDisplayed={1}
  pageCount={pageCount}
  previousLabel="< previous"
  renderOnZeroPageCount={null}
/>



// backend - controller methods
const getEmployeeCount = async (req, res, next) => {
  let employeeCount;
  try {
    employeeCount = await Employee.countDocuments();
  } catch (err) {
    const error = new HttpError(
      'Fetching employee count failed, please try again later.',
      500
    );
    return next(error);
  }

  res.json({ employeeCount });
  console.log("DEBUG -- Employee-Controller - Fetching employee count successful!");
};
const getEmployees = async (req, res, next) => {
  const page = req.query.page || 0;
  const employeesPerPage = 2; 

  let allEmployees;
  try {
    allEmployees = await Employee
      .find()
      .skip(page * employeesPerPage)
      .limit(employeesPerPage);
  } catch (err) {
    const error = new HttpError(
      'Fetching Employees failed, please try again later.',
      500
    );
    return next(error);
  }

  if (!allEmployees || allEmployees.length === 0) {
    return next(new HttpError('No employees found.', 404));
  }

  res.json({
    employees: allEmployees.map((emp) => emp.toObject({ getters: true })),
  });
  console.log("DEBUG -- Employee-Controller - Fetching employees successful!");
};