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

describe('RadioInput Component', () => {
  const mockOnChange = jest.fn();
  
  const defaultField = {
    Id: 'test-radio-1',
    Label: 'Test Radio',
    ProValue: 'Option A',
    Options: '["Option A", "Option B", "Option C"]',
  };

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

  it('renders radio options from JSON Options', () => {
    render(<RadioInput field={defaultField} onChange={mockOnChange} />);
    expect(screen.getByLabelText('Option A')).toBeInTheDocument();
    expect(screen.getByLabelText('Option B')).toBeInTheDocument();
    expect(screen.getByLabelText('Option C')).toBeInTheDocument();
  });

  it('has correct value selected', () => {
    render(<RadioInput field={defaultField} onChange={mockOnChange} />);
    const optionA = screen.getByLabelText('Option A');
    expect(optionA).toBeChecked();
  });

  it('calls onChange when a radio option is selected', () => {
    render(<RadioInput field={defaultField} onChange={mockOnChange} />);
    const optionB = screen.getByLabelText('Option B');
    fireEvent.click(optionB);
    expect(mockOnChange).toHaveBeenCalledWith('Option B');
  });

  it('renders disabled radios when disabled prop is true', () => {
    render(<RadioInput field={defaultField} onChange={mockOnChange} disabled={true} />);
    const optionA = screen.getByLabelText('Option A');
    expect(optionA).toBeDisabled();
  });

  it('displays helper text when provided', () => {
    render(
      <RadioInput field={defaultField} onChange={mockOnChange} helperText="Choose one option" />
    );
    expect(screen.getByText('Choose one option')).toBeInTheDocument();
  });

  it('handles invalid JSON Options gracefully', () => {
    const invalidField = { ...defaultField, Options: 'invalid json' };
    // Should not throw
    const { container } = render(<RadioInput field={invalidField} onChange={mockOnChange} />);
    // Should render empty - no options
    const radioGroup = container.querySelector('[role="radiogroup"]');
    expect(radioGroup).toBeInTheDocument();
  });

  it('handles empty Options', () => {
    const emptyOptionsField = { ...defaultField, Options: '' };
    const { container } = render(<RadioInput field={emptyOptionsField} onChange={mockOnChange} />);
    const radioGroup = container.querySelector('[role="radiogroup"]');
    expect(radioGroup).toBeInTheDocument();
  });

  it('handles undefined Options', () => {
    const noOptionsField = { ...defaultField, Options: undefined };
    const { container } = render(<RadioInput field={noOptionsField} onChange={mockOnChange} />);
    const radioGroup = container.querySelector('[role="radiogroup"]');
    expect(radioGroup).toBeInTheDocument();
  });

  it('has correct id attribute', () => {
    const { container } = render(<RadioInput field={defaultField} onChange={mockOnChange} />);
    const wrapper = container.querySelector('#field-test-radio-1');
    expect(wrapper).toBeInTheDocument();
  });
});
