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

describe("SelectionProcessPage render tests *first in order", () => {
  var props = {
    history: {
      replace: jest.fn(),
      push: jest.fn(),
      location: {
        pathname: "/selectionFlow",
      },
    },
    order: 0,
    modalEvent: jest.fn(),
    selection: {
      id: 1,
      name: "HR intervju",
      selectionProcesses: [],
      //   PropTypes.arrayOf(
      //     PropTypes.shape({
      //       id: PropTypes.number,
      //       name: PropTypes.string,
      //       date: PropTypes.string,
      //       status: PropTypes.string,
      //       currentSelection: PropTypes.number,
      //       map: PropTypes.func,
      //       applicant: PropTypes.shape({
      //         firstName: PropTypes.string,
      //         lastName: PropTypes.string,
      //       }),
      //     })
      //   ),
    },
  };

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

  let spyOnUseSelector;

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

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

  it("Should render add button if selection is first in order", () => {
    render(cont);

    expect(screen.getByTestId("interview-image")).toBeDefined();
  });

  it("Should render empty selection message if no proccesses exist", () => {
    render(cont);

    expect(screen.getByTestId("empty-selection")).toBeDefined();
  });

  it("Should call modal event if add button has been clicked", () => {
    render(cont);
    fireEvent.click(screen.getByTestId("interview-image"));
    expect(props.modalEvent).toHaveBeenCalled();
  });
});

describe("SelectionProcessPage render tests *first in order", () => {
  var props = {
    history: {
      replace: jest.fn(),
      push: jest.fn(),
      location: {
        pathname: "/selectionFlow",
      },
    },
    order: 1,
    modalEvent: jest.fn(),
    selection: {
      id: 1,
      name: "HR intervju",
      selectionProcesses: [
        {
          id: 1,
          name: "random",
          date: "02-05-2022",
          status: "Zakazan",
          currentSelection: 1,
          applicant: {
            firstName: "Meris",
            lastName: "Ahmatovic",
          },
        },
      ],
    },
  };

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

  let spyOnUseSelector;

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

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

  it("Should not render add button if not first in order", () => {
    render(cont);
  
    expect(screen.queryByTestId("interview-image")).toBe(null);
  });
  
  it("Should render empty selection message if no proccesses exist", () => {
    render(cont);

    expect(screen.queryByTestId("empty-selection")).toBe(null);
  });
});
