import { jest } from "@jest/globals";
import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import DateRangeInput from "../pages/GlobalConfig/Inputs/DateRangeInput.js";

describe("DateRangeInput Component", () => {
  const defaultProps = {
    field: {
      Id: "1",
      Label: "Date Range",
      ProValue: JSON.stringify({ from: "2023-06-15T10:00", to: "2023-06-20T18:00" }),
    },
    disabled: false,
    onChange: jest.fn(),
    error: false,
    helperText: "",
  };

  beforeEach(() => {
    jest.clearAllMocks();
  });

  it("should render two date inputs", () => {
    render(<DateRangeInput {...defaultProps} />);

    expect(screen.getByLabelText("Date Range From")).toBeInTheDocument();
    expect(screen.getByLabelText("Date Range To")).toBeInTheDocument();
  });

  it("should display the provided values", () => {
    render(<DateRangeInput {...defaultProps} />);

    expect(screen.getByDisplayValue("2023-06-15T10:00")).toBeInTheDocument();
    expect(screen.getByDisplayValue("2023-06-20T18:00")).toBeInTheDocument();
  });

  it("should call onChange with updated from date", () => {
    render(<DateRangeInput {...defaultProps} />);

    const fromInput = screen.getByLabelText("Date Range From");
    fireEvent.change(fromInput, { target: { value: "2023-07-01T09:00" } });

    expect(defaultProps.onChange).toHaveBeenCalledWith(
      JSON.stringify({ from: "2023-07-01T09:00", to: "2023-06-20T18:00" })
    );
  });

  it("should call onChange with updated to date", () => {
    render(<DateRangeInput {...defaultProps} />);

    const toInput = screen.getByLabelText("Date Range To");
    fireEvent.change(toInput, { target: { value: "2023-07-25T17:00" } });

    expect(defaultProps.onChange).toHaveBeenCalledWith(
      JSON.stringify({ from: "2023-06-15T10:00", to: "2023-07-25T17:00" })
    );
  });

  it("should be disabled when disabled prop is true", () => {
    render(<DateRangeInput {...defaultProps} disabled={true} />);

    expect(screen.getByLabelText("Date Range From")).toBeDisabled();
    expect(screen.getByLabelText("Date Range To")).toBeDisabled();
  });

  it("should show error state when error prop is true", () => {
    render(<DateRangeInput {...defaultProps} error={true} helperText="Invalid range" />);

    expect(screen.getByText("Invalid range")).toBeInTheDocument();
  });

  it("should handle empty ProValue", () => {
    const propsWithoutValue = {
      ...defaultProps,
      field: {
        ...defaultProps.field,
        ProValue: undefined,
      },
    };

    render(<DateRangeInput {...propsWithoutValue} />);

    expect(screen.getByLabelText("Date Range From")).toBeInTheDocument();
    expect(screen.getByLabelText("Date Range To")).toBeInTheDocument();
  });

  it("should throw error for invalid JSON", () => {
    const invalidJsonProps = {
      ...defaultProps,
      field: {
        ...defaultProps.field,
        ProValue: "invalid-json",
      },
    };

    expect(() => render(<DateRangeInput {...invalidJsonProps} />)).toThrow();
  });

  it("should have correct id attribute", () => {
    render(<DateRangeInput {...defaultProps} />);

    expect(document.getElementById("field-1")).toBeInTheDocument();
  });
});
