import { Router } from "react-router-dom";
import { SelectionProvider } from "../../context/SelectionContext";
import * as redux from "react-redux";
import { fireEvent, render, screen } from "@testing-library/react";
import store from "../../store";
import history from "../../store/utils/history";
import { mockState } from "../../mockState";
import SelectionCard from "../../components/Selection/SelectionCard";
import userEvent from "@testing-library/user-event";

describe("SelectionProcessPage render tests *first in order", () => {
  var props = {
    item: mockState.selections.processes[1].selectionProcesses[0],
    click: jest.fn(),
    dragStart: jest.fn(),
  };

  const cont = (
    <redux.Provider store={store}>
      <SelectionProvider>
        <Router history={history}>
          <SelectionCard {...props} />
        </Router>
      </SelectionProvider>
    </redux.Provider>
  );

  let spyOnUseSelector;
  let spyOnUseDispatch;
  let mockDispatch;

  beforeEach(() => {
    // Mock useSelector hook
    spyOnUseSelector = jest.spyOn(redux, "useSelector");

    // Mock useDisptach hook
    spyOnUseDispatch = jest.spyOn(redux, "useDispatch");

    // Mock dispatch function returned from useDispatch
    mockDispatch = jest.fn();
    spyOnUseDispatch.mockReturnValue(mockDispatch);
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it("Should render card", () => {
    render(cont);

    expect(screen.getByTestId("sel-card")).toBeDefined();
  });

  it("Should render schedule", () => {
    render(cont);

    expect(screen.getByTestId("process-date")).toBeDefined();
  });

//   to be completed
//   it("Should dispatch status change action when option 'done' is selected", async () => {
//     render(cont);

//     fireEvent.click(screen.getByTestId("status-btn"));
//     var select = screen.getByTestId("status-select-drop");
//     fireEvent.change(select, { target: { value: "Odrađen" } });

//     // userEvent.click(screen.getByRole(screen.getByTestId("status-select-drop"), "button"));
//     // await waitFor(() => userEvent.click(screen.getByText(/odrađen/i)));
//     // expect(screen.getByRole("heading")).toHaveTextContent(/odrađen/i);

//     expect(mockDispatch).toHaveBeenCalledWith(
//       setDoneProcessReq({
//         id: props.item.id,
//         name: "Some random name",
//         applicantId: props.item.applicant.applicantId,
//       })
//     );
//   });
});