import { render, screen, waitFor, fireEvent } from "@testing-library/react";
import * as redux from "react-redux";
import store from "../../store";
import { Router } from "react-router-dom";
import history from "../../store/utils/history";
import { mockState } from "../../mockState";
import ColorModeProvider from "../../context/ColorModeContext";
import ApplyForAdSecondStage from "../../components/Ads/ApplyForAdSecondStage";

describe("Apply for ad second stage ui tests", () => {
  const props = {
    professionalQualification: "Professional Qualification",
    setProfessionalQualification: jest.fn(),
    technologies: [
      {
        value: ".NET",
        isChecked: false,
        technologyId: 1,
        technologyType: "Backend",
      },
      {
        value: "React",
        isChecked: false,
        technologyId: 2,
        technologyType: "Frontend",
      },
      {
        value: "Git",
        isChecked: false,
        technologyId: 3,
        technologyType: "Other",
      },
    ],
    setTechnologies: jest.fn(),
    experience: 1,
    setExperience: jest.fn(),
    onIncreaseStage: jest.fn(),
    onDecreaseStage: jest.fn(),
  };

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

  let spyOnUseSelector;

  beforeEach(() => {
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector.mockReturnValue(mockState.ads.ads);
  });

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

  it("Should render apply for ad second stage", () => {
    render(cont);
    expect(screen.getByTestId("apply-for-ad-second-stage")).toBeDefined();
  });

  it("Should change professional qualification input", () => {
    render(cont);
    fireEvent.change(
      screen.getByTestId(
        "apply-for-ad-second-stage-professional-qualification"
      ),
      {
        target: { value: "Faculty" },
      }
    );

    expect(props.setProfessionalQualification).toHaveBeenCalled();
  });

  it("Should render backend technology", () => {
    const { container } = render(cont);

    expect(
      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[0]
    ).toBeDefined();
  });

  it("Should render frontend technology", () => {
    const { container } = render(cont);

    expect(
      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[1]
    ).toBeDefined();
  });

  it("Should render others technology", () => {
    const { container } = render(cont);

    expect(
      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[2]
    ).toBeDefined();
  });

  it("Should change experience", async () => {
    render(cont);

    fireEvent.change(
      screen.getByTestId("apply-for-ad-second-stage-experience-input"),
      { target: { value: 2 } }
    );

    waitFor(() => expect(props.professionalQualification).toHaveBeenCalled());
  });

  it("Should change backend technology to checked", async () => {
    const { container } = render(cont);

    fireEvent.click(
      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[0]
    );

    waitFor(() => expect(props.technologies[0]).toBe(true));
  });
});
