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

describe("SchedulePage render tests", () => {
  const cont = (
    <ColorModeProvider>
      <redux.Provider store={store}>
        <Router history={history}>
          <SchedulePage search="" />
        </Router>
      </redux.Provider>
    </ColorModeProvider>
  );

  let spyOnUseSelector;

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

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

  it("Should render", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("schedule-page-container")[0]
    ).toBeDefined();
  });

  it("Number of div's should be equal to the number of days in current month", () => {
    const { container } = render(cont);
    const date = new Date();
    const numberOfDaysInCurrentMonth = new Date(
      date.getFullYear(),
      date.getMonth() + 1,
      0
    ).getDate();
    expect(
      container.getElementsByClassName("day-component-container").length
    ).toBe(numberOfDaysInCurrentMonth);
  });

  it("should render two arrows", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("schedule-page-arrow-container").length
    ).toBe(2);
  });

  it("after clicking arrow for going back one month number of div's should be equal to number of days in new month", () => {
    const { container } = render(cont);
    fireEvent.click(
      container.getElementsByClassName("schedule-page-arrow-container")[0]
    );
    const date = new Date();
    const currentMonth = date.getMonth();
    const currentYear = date.getFullYear();
    const numberOfDaysInCurrentMonth = new Date(
      currentMonth - 1 === -1 ? currentYear - 1 : currentYear,
      currentMonth - 1 === -1 ? 12 : currentMonth,
      0
    ).getDate();
    expect(
      container.getElementsByClassName("day-component-container").length
    ).toBe(numberOfDaysInCurrentMonth);
  });

  it("after clicking arrow for going forward one month number of div's should be equal to number of days in new month", () => {
    const { container } = render(cont);
    fireEvent.click(
      container.getElementsByClassName("schedule-page-arrow-container")[1]
    );
    const date = new Date();
    const currentMonth = date.getMonth();
    const currentYear = date.getFullYear();
    const numberOfDaysInCurrentMonth = new Date(
      currentMonth + 1 === 12 ? currentYear + 1 : currentYear,
      currentMonth + 1 === 12 ? 1 : currentMonth + 2,
      0
    ).getDate();
    expect(
      container.getElementsByClassName("day-component-container").length
    ).toBe(numberOfDaysInCurrentMonth);
  });

  it("When page is initialy rendered DayDetailsComponent should not be rendered", () => {
    render(cont);
    expect(screen.queryByTestId("day-component-dialog")).toBeNull();
  });

  it("After clicking on some day DayDetailsComponent should be rendered", () => {
    const { container } = render(cont);
    fireEvent.click(
      container.getElementsByClassName("day-component-container")[0]
    );
    expect(screen.getByTestId("day-component-dialog")).toBeDefined();
  });

  // it("After clicking on right arrow of DayDetailsComponent should be rendered new day", async () => {
  //   const { container } = render(cont);
  //   fireEvent.click(
  //     container.getElementsByClassName("day-component-container")[0]
  //   );
  //   fireEvent.click(screen.getByTestId("day-details-right-arrow"));
  //   expect(screen.getByTestId("day-details-component-process")).toBeDefined();
  //   await waitFor(() =>
  //     expect(screen.getByTestId("day-details-applicant").textContent).toBe(
  //       "Meris Ahmatovic"
  //     )
  //   );
  // });
});
