import React from "react";
import { render, act } from "@testing-library/react";
import "@testing-library/jest-dom";
import { DateRangePickerProps } from "../DateRangePickerProps";
import DateRangePicker from "../DateRangePicker";
import Calendar from "../../Calendar/Calendar";
import DateInput from "../../DateInput/DateInput";

const CustomCalendarComponent = () => <Calendar className="custom-calendar" />;
const CustomEndDateInputComponent = () => (
  <DateInput className="custom-end-date-input" />
);

describe("DateRangePicker Component", () => {
  const props: DateRangePickerProps = {
    dataTestId: "test-id",
    adaptive: true,
    allowReverse: true,
    ariaDescribedBy: "descriptionElementId",
    calendar: CustomCalendarComponent,
    className: "custom-class",
    defaultValue: { start: new Date(), end: new Date() },
    endDateInput: CustomEndDateInputComponent,
    focusedDate: new Date(),
    id: "dateRangePickerId",
    max: new Date("2023-12-31"),
    show: true,
    style: { color: "blue" },
    tabIndex: 0,
    valid: true,
    value: { start: new Date(), end: new Date() },
  };

  it("renders all props correctly", async () => {
    await act(async () => {
      render(<DateRangePicker {...props} />);
    });
  });

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