import { fireEvent, render, screen, waitFor } 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 AddAdModalFirstStage from "../../components/Ads/AddAdModalFirstStage";

describe("Add ad modals ui tests", () => {
  const props = {
    onIncrementStage: jest.fn(),
    onDecrementStage: jest.fn(),
    onCompleteFirstStage: jest.fn(),
    title: "Title",
    employmentType: "Work",
    workHour: "FullTime",
    setTitle: jest.fn(),
    setEmploymentType: jest.fn(),
    setWorkHour: jest.fn(),
    expiredAt: new Date(),
    setExpiredAt: jest.fn(),
  };

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

  let spyOnUseSelector;

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

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

  it("Should render add ad modal stage", () => {
    const { container } = render(cont);
    const modal = container.getElementsByClassName("add-ad-modal-stage");
    expect(modal).toBeDefined();
  });

  it("Should render work button", () => {
    render(cont);
    expect(screen.getByTestId("add-ad-modal-work-btn")).toBeDefined();
  });

  it("Should render intership button", () => {
    render(cont);
    expect(screen.getByTestId("add-ad-modal-intership-btn")).toBeDefined();
  });

  it("Should render parttime button", () => {
    render(cont);
    expect(screen.getByTestId("add-ad-modal-parttime-btn")).toBeDefined();
  });

  it("Should render fulltime button", () => {
    render(cont);
    expect(screen.getByTestId("add-ad-modal-fulltime-btn")).toBeDefined();
  });

  it("Should render add ad modal first stage actions", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("add-ad-modal-action")
    ).toBeDefined();
  });

  it("Should change employment type to intership", () => {
    render(cont);
    fireEvent.click(screen.getByTestId("add-ad-modal-intership-btn"));
    expect(props.setEmploymentType).toHaveBeenCalled();
  });

  it("Should change employment type to work", () => {
    render(cont);
    fireEvent.click(screen.getByTestId("add-ad-modal-work-btn"));
    expect(props.setEmploymentType).toHaveBeenCalled();
  });

  it("Should change work hour to parttime", () => {
    render(cont);
    fireEvent.click(screen.getByTestId("add-ad-modal-parttime-btn"));
    expect(props.setWorkHour).toHaveBeenCalled();
  });

  it("Should change work hour to fulltime", () => {
    render(cont);
    fireEvent.click(screen.getByTestId("add-ad-modal-fulltime-btn"));
    expect(props.setWorkHour).toHaveBeenCalled();
  });

  it("Should call function on click go back button", async () => {
    render(cont);
    fireEvent.click(screen.getByTestId("add-ad-modal-go-back"));
    waitFor(() => expect(props.onDecrementStage).toHaveBeenCalled());
  });

  it("Should call function on click go forward button", () => {
    render(cont);
    fireEvent.click(screen.getByTestId("add-ad-modal-go-forward"));
    expect(props.onIncrementStage).toHaveBeenCalled();
  });

  it("Should change title text", () => {
    render(cont);
    fireEvent.change(screen.getByTestId("add-ad-modal-title"), { target: { value: ".NET DEVELOPER" } })
    expect(props.setTitle).toBeCalled();
  });

  it("Should change expired at text", () => {
    render(cont);
    fireEvent.change(screen.getByTestId("add-ad-modal-expired-at"), { target: { value: "2020-05-24" } })
    expect(props.setExpiredAt).toBeCalled();
  });
});
