import React from "react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import { DateTimePickerProps } from "../DateTimePickerProps";
import DateTimePicker from "../DateTimePicker";

describe("DateTimePicker Component", () => {
  const props: DateTimePickerProps = {
    dataTestId: "test-id",
    adaptive: false,
    adaptiveTitle: "Adaptive Title",
    ariaDescribedBy: "Description of DateTimePicker",
    ariaLabelledBy: "Label of DateTimePicker",
    className: "custom-class-name",
    defaultShow: false,
    defaultValue: new Date(),
    disabled: false,
    fillMode: "solid",
    focusedDate: new Date(),
    format: "dd.MM.yyyy HH:mm",
    id: "datetimepicker-id",
    label: "DateTime Picker",
    max: new Date("2024-12-31"),
    min: new Date("2020-01-01"),
    name: "datetime-picker",
    placeholder: "Select date and time",
    required: false,
    rounded: "medium",
    show: false,
    size: "medium",
    tabIndex: 0,
    title: "DateTime Picker",
    valid: true,
    validationMessage: "Invalid date and time",
    validityStyles: true,
    value: new Date(),
    weekNumber: false,
    width: 200,
  };

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

  it("matches the snapshot", () => {
    const { asFragment } = render(<DateTimePicker />);
    const fragment = asFragment();
    const cleanFragment = fragment.cloneNode(true) as HTMLElement;
    const inputs = cleanFragment.querySelectorAll("input");
    inputs.forEach((input) => {
      input.removeAttribute("aria-controls");
      input.removeAttribute("id");
    });
    expect(cleanFragment).toMatchSnapshot();
  });
});