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

describe("DateInput Component", () => {
  const props: DateInputProps = {
    dataTestId: "test-id",
    ariaControls: "elementId",
    ariaDescribedBy: "descriptionElementId",
    ariaExpanded: false,
    ariaHasPopup: "grid",
    ariaLabel: "Accessible label",
    ariaLabelledBy: "labelElementId",
    ariaRole: "textbox",
    className: "custom-class",
    defaultValue: new Date(),
    dir: "ltr",
    disabled: false,
    fillMode: "solid",
    format: "dd/MM/yyyy",
    formatPlaceholder: { year: "y", month: "m", day: "d" },
    id: "dateInputId",
    label: "Date label",
    max: new Date("2023-12-31"),
    maxTime: new Date("23:59"),
    min: new Date("2023-01-01"),
    minTime: new Date("00:00"),
    name: "dateInput",
    placeholder: "Enter date",
    readonly: false,
    required: false,
    rounded: "medium",
    size: "medium",
    spinners: true,
    steps: { year: 1, month: 1, day: 1, hour: 1, minute: 1, second: 1 },
    tabIndex: 0,
    title: "Input title",
    valid: true,
    validationMessage: "Invalid input",
    validityStyles: true,
    value: new Date(),
    width: "100%",
  };

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

  it("matches the snapshot for DateInput", () => {
    const { asFragment } = render(<DateInput {...props} />);
    const fragment = asFragment();
    const cleanFragment = fragment.cloneNode(true) as HTMLElement;

    cleanFragment.querySelectorAll("input[type='text']").forEach((el) => {
      el.removeAttribute("value");
    });

    expect(cleanFragment).toMatchSnapshot();
  });
});