import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import * as redux from "react-redux";
import CandidatesPage from "../../pages/CandidatesPage/CandidatesPage";
import store from "../../store";
import { mockState } from "../../mockState";
import { Router } from "react-router-dom";
import history from "../../store/utils/history";
import mediaQuery from "css-mediaquery";

function createMatchMedia(width) {
  return (query) => ({
    matches: mediaQuery.match(query, { width }),
    addListener: () => {},
    removeListener: () => {},
  });
}

describe("CandidatesPage render tests", () => {
  const cont = (
    <redux.Provider store={store}>
      <Router history={history}>
        <CandidatesPage />
      </Router>
    </redux.Provider>
  );

  let spyOnUseSelector;

  beforeEach(() => {
    window.matchMedia = createMatchMedia(601);
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector.mockReturnValueOnce(mockState.technologies.technologies);
  });

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

  it("Should render first header because width of screen is greater than 600", () => {
    render(cont);
    expect(screen.getByTestId("candidates-header1")).toBeDefined();
  });

  it("Should render second header because width of screen is greater than 600", () => {
    render(cont);
    expect(screen.queryByTestId("candidates-header2")).toBeNull();
  });

  it("Should render", () => {
    render(cont);
    expect(screen.getByTestId("candidates-page")).toBeDefined();
  });

  it("Should render first button responsible for showing different components inside page because width of screen is greater than 600", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("all-white-btn")[0]).toBeDefined();
  });

  it("Should not render second button responsible for showing different components inside page because width of screen is greater than 600", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("candidate-btn-view-2")[0]
    ).toBeUndefined();
  });

  it("should be rendered button which is used for showing input responsible for searching by name", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("candidate-btn")[1]).toBeDefined();
  });

  it("Should render first filter button because width is greater than 600", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("candidate-btn-filters1")[0]
    ).toBeDefined();
  });

  it("Should not render second filter button because width is greater than 600", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("candidate-btn-filters2")[0]
    ).toBeUndefined();
  });

  it("input for searching by name should not be shown when component is initialy rendered", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("proba")[0].style.visibility).toBe(
      "hidden"
    );
  });

  // it("input for searching by name should be shown after clicking button for first time", async () => {
  //   const { container } = render(cont);
  //   fireEvent.click(container.getElementsByClassName("candidate-btn")[1]);
  //   await waitFor(() =>
  //     expect(
  //       container.getElementsByClassName("proba")[0].style.visibility
  //     ).toBe("vissible")
  //   );
  // });

  it("Should render TableViewPage component when page is initialy rendered", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("candidates-table")[0]
    ).toBeDefined();
  });

  // it("should render AdsCandidatesPage component when button for switching to another view is clicked for the first time", async () => {
  //   const { container } = render(cont);
  //   fireEvent.click(container.getElementsByClassName("candidate-btn")[0]);
  //   await waitFor(() =>
  //     expect(
  //       container.getElementsByClassName("ads-candidates-container")[0]
  //     ).toBeDefined()
  //   );
  // });
});
