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

describe('TextAreaInput Component', () => {
  const mockOnChange = jest.fn();
  
  const defaultField = {
    Id: 'test-textarea-1',
    Label: 'Test TextArea',
    ProValue: 'Initial text',
    Placeholder: 'Enter some text',
    Type: 'textarea',
  };

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

  it('renders the textarea with label', () => {
    render(<TextAreaInput field={defaultField} onChange={mockOnChange} />);
    expect(screen.getByLabelText('Test TextArea')).toBeInTheDocument();
  });

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

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

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

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

  it('displays helper text when provided', () => {
    render(
      <TextAreaInput field={defaultField} onChange={mockOnChange} helperText="Maximum 500 characters" />
    );
    expect(screen.getByText('Maximum 500 characters')).toBeInTheDocument();
  });

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

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

  it('renders as multiline for textarea type', () => {
    const { container } = render(<TextAreaInput field={defaultField} onChange={mockOnChange} />);
    const textarea = container.querySelector('textarea');
    expect(textarea).toBeInTheDocument();
  });

  it('renders as single line for non-textarea type', () => {
    const textField = { ...defaultField, Type: 'text' };
    const { container } = render(<TextAreaInput field={textField} onChange={mockOnChange} />);
    // Should have input element instead of textarea for multiline
    const input = screen.getByLabelText('Test TextArea');
    expect(input).toBeInTheDocument();
  });
});
