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

describe("Apply for ad fourth stage ui tests", () => {
  const props = {
    coverLetter: "",
    setCoverLetter: jest.fn(),
    pdfFile: null,
    setPdfFile: jest.fn(),
    onDecreaseStage: jest.fn(),
    onFinishedFourStages: jest.fn(),
  };

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

  let spyOnUseSelector;
  let file;

  beforeEach(() => {
    file = new File(["(⌐□_□)"], "test.png", { type: "image/png" });
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector.mockReturnValue(mockState.ads.ads);
  });

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

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

  it("Should change pdfFile", async () => {
    render(cont);
    fireEvent.change(
      screen.getByTestId("apply-for-job-modal-fourth-stage-pdf-input"),
      { target: { files: [file] } }
    );

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

  it("Should change coverLetter", async () => {
    render(cont);
    fireEvent.change(
      screen.getByTestId("apply-for-job-modal-fourth-stage-cover-letter-input"),
      { target: { value: "Cover Letter" } }
    );

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

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

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

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

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

  it("Drag and drop", async () => {
    const { container } = render(cont);
    fireEvent.drop(container.getElementsByClassName("uploadCV-input")[0], {
      dataTransfer: { files: [file] },
    });
  });

  it("Drag and drop over", async () => {
    const { container } = render(cont);
    fireEvent.dragOver(container.getElementsByClassName("uploadCV-input")[0], {
      dataTransfer: { files: [file] },
    });
  });

  it("Drag and drop leave", async () => {
    const { container } = render(cont);
    fireEvent.dragOver(container.getElementsByClassName("uploadCV-input")[0], {
      dataTransfer: { files: [file] },
    });
  });
});
