import React from "react";
import { fireEvent, render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { MultiViewCalendarProps } from "../MultiViewCalendarProps";
import MultiViewCalendar from "../MultiViewCalendar";

const CustomCellComponent: React.FC = () => {
  return <td className="custom-cell" />;
};

const CustomHeaderTitleComponent: React.FC = () => {
  return <div className="custom-header-title" />;
};

const CustomWeekCellComponent: React.FC = () => {
  return <td className="custom-week-cell" />;
};

describe("MultiViewCalendar Component", () => {
  const props: MultiViewCalendarProps = {
    dataTestId: "test-id",
    activeRangeEnd: "end",
    allowReverse: true,
    ariaDescribedBy: "description-id",
    ariaLabelledBy: "label-id",
    bottomView: "month",
    cell: CustomCellComponent,
    className: "custom-multiview-calendar",
    defaultActiveView: "year",
    defaultValue: new Date(),
    disabled: false,
    focusedDate: new Date(),
    headerTitle: CustomHeaderTitleComponent,
    id: "multiview-calendar",
    max: new Date("2099-12-31"),
    min: new Date("1900-01-01"),
    mode: "range",
    tabIndex: 0,
    topView: "century",
    value: new Date(),
    views: 3,
    weekCell: CustomWeekCellComponent,
    weekNumber: true,
  };

  it("renders all props correctly", () => {
    render(<MultiViewCalendar {...props} />);
  });

  it("calls onChange when date is changed", () => {
    const mockOnChange = jest.fn();
    render(<MultiViewCalendar onChange={mockOnChange} />);
  });

  it("calls onBlur when the calendar is blurred", () => {
    const mockOnBlur = jest.fn();
    const { container } = render(
      <MultiViewCalendar {...props} onBlur={mockOnBlur} />
    );

    const calendarElement = container.querySelector("#multiview-calendar");
    if (calendarElement) {
      fireEvent.blur(calendarElement);
      expect(mockOnBlur).toHaveBeenCalled();
    } else {
      fail("Calendar element not found");
    }
  });

  it("calls onFocus when the calendar is focused", () => {
    const mockOnFocus = jest.fn();
    const { container } = render(
      <MultiViewCalendar {...props} onFocus={mockOnFocus} />
    );

    const calendarElement = container.querySelector("#multiview-calendar");
    if (calendarElement) {
      fireEvent.focus(calendarElement);
      expect(mockOnFocus).toHaveBeenCalled();
    } else {
      fail("Calendar element not found");
    }
  });

  it("matches the snapshot", () => {
    const { asFragment } = render(<MultiViewCalendar {...props} />);
    expect(asFragment()).toMatchSnapshot();
  });
});