import { render } from '@testing-library/react';
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { ReadOnlyTextField } from './ReadOnlyTextField';

describe('ReadOnlyTextField', () => {
  it('renders the component without crashing', () => {
    const { container } = render(<ReadOnlyTextField />);

    expect(container).toBeTruthy();
  });

  it('displays a label', () => {
    const mockLabel = 'mockLabel';
    const { container } = render(<ReadOnlyTextField label={mockLabel} />);

    const label = container.querySelector('label');

    expect(label?.textContent).toBe(mockLabel);
  });

  it('renders a string value', () => {
    const mockValue = 'mockLabel';
    const { container } = render(<ReadOnlyTextField value={mockValue} />);

    const input = container.querySelector('input') as HTMLInputElement;

    expect(input.value).toBe(mockValue);
  });

  it('renders a numeric value', () => {
    const mockValue = 3;
    const { container } = render(<ReadOnlyTextField value={mockValue} />);

    const input = container.querySelector('input') as HTMLInputElement;

    expect(input.value).toBe(String(mockValue));
  });

  it('renders an array of values', () => {
    const mockValue = ['de', 'en', 'ja', 'fr'];
    const { container } = render(<ReadOnlyTextField value={mockValue} />);

    const input = container.querySelector('input') as HTMLInputElement;

    expect(input.value).toBe('de, en, ja, fr');
  });

  it('defaults to empty strings for label and value', () => {
    const mockDefaults = '';
    const { container } = render(<ReadOnlyTextField />);

    const label = container.querySelector('label');
    const input = container.querySelector('input') as HTMLInputElement;

    expect(label?.textContent).toBe(mockDefaults);
    expect(input.value).toBe(mockDefaults);
  });

  it('triggers transform functions once per render', () => {
    const spy = vi.fn();
    const mockValue = 3;

    render(<ReadOnlyTextField value={mockValue} transform={spy} />);

    expect(spy).toHaveBeenCalledTimes(1);
    expect(spy).toHaveBeenCalledWith(3);
  });
});
