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

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

  let spyOnUseSelector;

  beforeEach(() => {
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector.mockReturnValue(mockState.patterns.patterns);
    // .mockReturnValueOnce([
    //   {
    //     id: 1,
    //     name: "HR intervju",
    //     selectionProcesses: [],
    //   },
    // ]);
  });

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

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

  it("Should render edit mode button", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("editEnableBtn")[0]).toBeDefined();
  });

  it("Should render edit mode button on card", () => {
    const { container } = render(cont);
    var btn = container.getElementsByClassName("c-icon-button")[0];
    fireEvent.click(btn);
    var btn1 = container.getElementsByClassName("c-icon-button")[1];
    expect(btn1).toBeDefined();
  });

  it("Should render add pattern button", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("add-ad-btn")[0]).toBeDefined();
  });

  it("Should render add pattern modal", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("add-pattern-btn")[0]);
    expect(
      container.getElementsByClassName("add-pattern-btn")[0]
    ).toBeDefined();
  });

  it("Should render edit pattern modal when click on edit pattern button", () => {
    const { container } = render(cont);
    var btn = container.getElementsByClassName("c-icon-button")[0];
    fireEvent.click(btn);
    var btn1 = container.getElementsByClassName("c-icon-button")[1];
    fireEvent.click(btn1);
    var modal = screen.getByTestId("custom-modal-test-id");
    expect(modal).toBeDefined();
  });

  it("Should render filter button", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("custom-filter-button")
    ).toBeDefined();
  });

  it("Should render filters", () => {
    const { container } = render(cont);
    fireEvent.click(
      container.getElementsByClassName("custom-filter-button")[0]
    );
    expect(screen.getByTestId("pattern-filters")).toBeDefined();
  });

  it("Should render pattern cards", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("pattern-card-parent").length
    ).toBeGreaterThan(0);
  });

  it("Should submit filters handler", async () => {
    const { container } = render(cont);
    fireEvent.click(
      container.getElementsByClassName("custom-filter-button")[0]
    );
    waitFor(() => {
      fireEvent.click(
        container.getElementsByClassName("pattern-filters-checkbox")[0]
      );

      fireEvent.change(
        container.getElementsByClassName(
          "custom-drawer-sub-card-content-input-1"
        )[0],
        { target: { value: "2024-05-05" } }
      );

      fireEvent.change(
        container.getElementsByClassName(
          "custom-drawer-sub-card-content-input-2"
        )[0],
        { target: { value: "2025-05-05" } }
      );

      const searchBtn = screen.getByTestId("custom-drawer-submit-search");

      fireEvent.click(searchBtn);
      expect(searchBtn).toBeDefined();
    });
  });
});
