import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { FormField } from '../FormField';

describe('FormField', () => {
  const defaultProps = {
    id: 'test-field',
    label: 'Test Label',
    value: '',
    field: 'firstName' as const,
    updateField: jest.fn()
  };

  it('should render label and input', () => {
    const { getByLabelText, getByText } = render(
      <FormField {...defaultProps} />
    );
    expect(getByText('Test Label')).toBeInTheDocument();
    expect(getByLabelText('Test Label')).toBeInTheDocument();
  });

  it('should show required asterisk when required', () => {
    const { container } = render(<FormField {...defaultProps} required />);
    expect(container.querySelector('span')).toHaveTextContent('*');
  });

  it('should not show required asterisk by default', () => {
    const { queryByText } = render(<FormField {...defaultProps} />);
    expect(queryByText('*')).not.toBeInTheDocument();
  });

  it('should call updateField on input change', () => {
    const updateField = jest.fn();
    const { getByLabelText } = render(
      <FormField {...defaultProps} updateField={updateField} />
    );
    fireEvent.change(getByLabelText('Test Label'), {
      target: { value: 'hello' }
    });
    expect(updateField).toHaveBeenCalledWith('firstName', 'hello');
  });

  it('should show error text when error is provided', () => {
    const { getByText } = render(
      <FormField {...defaultProps} error="This is required" />
    );
    expect(getByText('This is required')).toBeInTheDocument();
  });

  it('should not show error text when no error', () => {
    const { queryByText } = render(<FormField {...defaultProps} />);
    expect(queryByText('This is required')).not.toBeInTheDocument();
  });

  it('should render with the correct input type', () => {
    const { getByLabelText } = render(
      <FormField {...defaultProps} type="email" />
    );
    expect(getByLabelText('Test Label')).toHaveAttribute('type', 'email');
  });

  it('should default to text input type', () => {
    const { getByLabelText } = render(<FormField {...defaultProps} />);
    expect(getByLabelText('Test Label')).toHaveAttribute('type', 'text');
  });
});