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

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

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

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

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

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

  it('displays default true, false label values', () => {
    const { container: container1 } = render(<BooleanViewField value={true} />);
    const text1 = container1.querySelector('[data-test-id="form-field-value"]');
    expect(text1?.textContent).toBe('True');

    const { container: container2 } = render(
      <BooleanViewField value={false} />,
    );
    const text2 = container2.querySelector('[data-test-id="form-field-value"]');
    expect(text2?.textContent).toBe('False');
  });

  it('renders value: true', () => {
    const trueLabel = 'Enabled';
    const falseLabel = 'Disabled';

    const { container } = render(
      <BooleanViewField
        value={true}
        trueLabel={trueLabel}
        falseLabel={falseLabel}
      />,
    );

    const green = container.querySelector('.true');
    const red = container.querySelector('.false');
    const text = container.querySelector('[data-test-id="form-field-value"]');

    expect(green).toBeInTheDocument();
    expect(red).not.toBeInTheDocument();
    expect(text?.textContent).toBe(trueLabel);
  });

  it('renders value: false', () => {
    const trueLabel = 'Enabled';
    const falseLabel = 'Disabled';

    const { container } = render(
      <BooleanViewField
        value={false}
        trueLabel={trueLabel}
        falseLabel={falseLabel}
      />,
    );

    const green = container.querySelector('.true');
    const red = container.querySelector('.false');
    const text = container.querySelector('[data-test-id="form-field-value"]');

    expect(green).not.toBeInTheDocument();
    expect(red).toBeInTheDocument();
    expect(text?.textContent).toBe(falseLabel);
  });

  it('defaults to show red circle', () => {
    const { container } = render(<BooleanViewField />);

    const green = container.querySelector('.true');
    const red = container.querySelector('.false');

    expect(green).not.toBeInTheDocument();
    expect(red).toBeInTheDocument();
  });
});
