import React from "react";
import { render, act } from "@testing-library/react";
import "@testing-library/jest-dom";
import { DatePickerProps } from "../DatePickerProps";
import DatePicker from "../DatePicker";
import DateInput from "../../DateInput/DateInput";
import { ToggleButton } from "@progress/kendo-react-dateinputs/dist/npm/datepicker/ToggleButton";
import Calendar from "../../Calendar/Calendar";
import Popup from "../../../Popup/Popup";

describe("DatePicker Component", () => {
  const props: DatePickerProps = {
    dataTestId: "test-id",
    adaptive: true,
    ariaDescribedBy: "descriptionElementId",
    ariaLabel: "Accessible label",
    ariaLabelledBy: "labelElementId",
    calendar: Calendar,
    className: "custom-class",
    dateInput: DateInput,
    defaultShow: false,
    defaultValue: new Date(),
    disabled: false,
    fillMode: "solid",
    focusedDate: new Date(),
    format: "dd/MM/yyyy",
    formatPlaceholder: { year: "y", month: "m", day: "d" },
    id: "datePickerId",
    label: "Date label",
    max: new Date("2023-12-31"),
    min: new Date("2023-01-01"),
    name: "datePicker",
    placeholder: "Enter date",
    popup: Popup,
    popupSettings: {
      animate: true,
      appendTo: document.body,
      popupClass: "popup-class",
    },
    required: false,
    rounded: "medium",
    show: true,
    size: "medium",
    tabIndex: 0,
    title: "Input title",
    toggleButton: ToggleButton,
    valid: true,
    validationMessage: "Invalid input",
    validityStyles: true,
    value: new Date(),
    weekNumber: false,
    width: "100%",
  };

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

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