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

describe('NumberInput Component', () => {
  const mockOnChange = jest.fn();
  
  const defaultField = {
    Id: 'test-number-1',
    Label: 'Test Number',
    ProValue: '5',
    Placeholder: 'Enter a number',
    Min: 0,
    Max: 100,
  };

  beforeEach(() => {
    mockOnChange.mockClear();
  });

  it('renders the number input with label', () => {
    render(<NumberInput field={defaultField} onChange={mockOnChange} />);
    expect(screen.getByLabelText('Test Number')).toBeInTheDocument();
  });

  it('renders with correct initial value', () => {
    render(<NumberInput field={defaultField} onChange={mockOnChange} />);
    const input = screen.getByLabelText('Test Number');
    expect(input).toHaveValue(5);
  });

  it('calls onChange when value changes', () => {
    render(<NumberInput field={defaultField} onChange={mockOnChange} />);
    const input = screen.getByLabelText('Test Number');
    fireEvent.change(input, { target: { value: '10' } });
    expect(mockOnChange).toHaveBeenCalledWith('10');
  });

  it('renders disabled when disabled prop is true', () => {
    render(<NumberInput field={defaultField} onChange={mockOnChange} disabled={true} />);
    const input = screen.getByLabelText('Test Number');
    expect(input).toBeDisabled();
  });

  it('displays error state when error prop is true', () => {
    const { container } = render(
      <NumberInput field={defaultField} onChange={mockOnChange} error={true} />
    );
    const inputWrapper = container.querySelector('.MuiOutlinedInput-root');
    expect(inputWrapper).toHaveClass('Mui-error');
  });

  it('displays helper text when provided', () => {
    render(
      <NumberInput field={defaultField} onChange={mockOnChange} helperText="Enter a value between 0 and 100" />
    );
    expect(screen.getByText('Enter a value between 0 and 100')).toBeInTheDocument();
  });

  it('renders with empty value when ProValue is empty', () => {
    const emptyField = { ...defaultField, ProValue: '' };
    render(<NumberInput field={emptyField} onChange={mockOnChange} />);
    const input = screen.getByLabelText('Test Number');
    expect(input).toHaveValue(null);
  });

  it('has correct id attribute', () => {
    render(<NumberInput field={defaultField} onChange={mockOnChange} />);
    const input = screen.getByLabelText('Test Number');
    expect(input).toHaveAttribute('id', 'field-test-number-1');
  });

  it('has min and max attributes set', () => {
    render(<NumberInput field={defaultField} onChange={mockOnChange} />);
    const input = screen.getByLabelText('Test Number');
    expect(input).toHaveAttribute('min', '0');
    expect(input).toHaveAttribute('max', '100');
  });
});
