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 ApplyForAdFirstStage from "../../components/Ads/ApplyForAdFirstStage";

describe("Apply for ad first stage ui tests", () => {
  const props = {
    firstName: "E",
    setFirstName: jest.fn(),
    lastName: "B",
    gender: "Male",
    setGender: jest.fn(),
    setLastName: jest.fn(),
    dateOfBirth: new Date(),
    setDateOfBirth: jest.fn(),
    phoneNumber: "0",
    setPhoneNumber: jest.fn(),
    onIncreaseStage: jest.fn(),
  };

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

  let spyOnUseSelector;

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

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

  it("Should render firstName input", () => {
    render(cont);
    expect(screen.getByTestId("apply-for-job-modal-first-name-input")).toBeDefined();
  });

  it("Should change firstName on changing input", async () => {
    render(cont);
    fireEvent.change(
      screen.getByTestId("apply-for-job-modal-first-name-input"),
      { target: { value: "Ermin" } }
    );

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

  it("Should change last on changing input", async () => {
    render(cont);
    fireEvent.change(screen.getByTestId("apply-for-job-modal-last-name-input"), {
      target: { value: "Bronja" },
    });

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

  it("Should select male gender", async () => {
    const { container } = render(cont);
    fireEvent.click(
      container.getElementsByClassName("apply-for-job-modal-gender-input")[0]
    );

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

  it("Should select female gender", async () => {
    const { container } = render(cont);
    fireEvent.click(
      container.getElementsByClassName("apply-for-job-modal-gender-input")[1]
    );

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

  it("Should change date of birth", async () => {
    render(cont);
    fireEvent.change(screen.getByTestId("apply-for-job-modal-date-of-birth"), {
      target: { value: "1998-05-05" },
    });

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

  it("Should change phone number", async () => {
    render(cont);
    fireEvent.change(screen.getByTestId("apply-for-job-modal-phone-number"), { target: { value: "0000000000" } });

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

  it("Should click go forward button", async () => {
    render(cont);
    fireEvent.click(screen.getByTestId("apply-for-job-modal-go-forward-button"));

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