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

describe("Apply for ad third stage ui tests", () => {
  const props = {
    onIncreaseStage: jest.fn(),
    onDecreaseStage: jest.fn(),
    linkedinLink: "",
    setLinkedinLink: jest.fn(),
    githubLink: "",
    setGithubLink: jest.fn(),
    bitBucketLink: "",
    setBitBucketLink: jest.fn(),
    email: "",
    setEmail: jest.fn(),
  };

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

  let spyOnUseSelector;

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

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

  it("Should change linkedin input", async () => {
    render(cont);
    fireEvent.change(
      screen.getByTestId("apply-for-ad-modal-third-stage-linkedin-input"),
      { target: { value: "https://linkedin" } }
    );

    waitFor(() => expect(props.linkedinLink).toBe("https://linkedin"));
  });

  it("Should render linkedin input", () => {
    render(cont);

    expect(
      screen.getByTestId("apply-for-ad-modal-third-stage-linkedin-input")
    ).toBeDefined();
  });

  it("Should change github input", async () => {
    render(cont);
    fireEvent.change(
      screen.getByTestId("apply-for-ad-modal-third-stage-github-input"),
      { target: { value: "https://github" } }
    );

    waitFor(() => expect(props.githubLink).toBe("https://github"));
  });

  it("Should change bitbucket input", async () => {
    render(cont);
    fireEvent.change(
      screen.getByTestId("apply-for-ad-modal-third-stage-bitbucket-input"),
      { target: { value: "https://bitbucket" } }
    );

    waitFor(() => expect(props.bitBucketLink).toBe("https://bitbucket"));
  });

  it("Should change email input", async () => {
    render(cont);
    fireEvent.change(
      screen.getByTestId("apply-for-ad-modal-third-stage-email-input"),
      { target: { value: "ermin.bronja@dilig.net" } }
    );

    waitFor(() => expect(props.email).toBe("ermin.bronja@dilig.net"));
  });

  it("Should go back when button clicked", async () => {
    render(cont);
    fireEvent.click(
      screen.getByTestId("apply-for-ad-modal-third-stage-go-back-button")
    );

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

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

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