import React from 'react';

import { render } from '../../../vitest/render';

import { StatusIndicator } from './StatusIndicator';

const root = (container: HTMLElement) => container.querySelector('.status-indicator');
const label = (container: HTMLElement) => container.querySelector('.status-indicator > span:last-child');

describe('StatusIndicator accessibility', () => {
  it('renders the label as plain text with a hidden decorative shape', () => {
    const { container } = render(<StatusIndicator state='positive' label='Paid' />);

    expect(root(container)?.getAttribute('role')).toBeNull();
    expect(root(container)?.getAttribute('aria-label')).toBeNull();
    expect(label(container)?.textContent).toBe('Paid');
    expect(container.querySelector('svg')?.getAttribute('aria-hidden')).toBe('true');
  });

  it('keeps a hidden label readable by assistive tech', () => {
    const { container } = render(<StatusIndicator state='critical' label='Critical' labelHidden />);

    const el = label(container) as HTMLElement;
    expect(el.textContent).toBe('Critical');
    expect(el.style.position).toBe('absolute');
    expect(el.style.width).toBe('1px');
    expect(el.classList.contains('status-indicator__label')).toBe(false);
  });

  it('exposes a tooltip trigger as a focusable button role', () => {
    const { container } = render(<StatusIndicator state='critical' label='Failed' tooltip='Payment failed' />);

    expect(root(container)?.getAttribute('role')).toBe('button');
    expect(root(container)?.getAttribute('tabindex')).toBe('0');
  });

  it('does not make a tooltip-less indicator interactive', () => {
    const { container } = render(<StatusIndicator state='positive' label='Paid' />);

    expect(root(container)?.getAttribute('tabindex')).toBeNull();
    expect(root(container)?.classList.contains('status-indicator--interactive')).toBe(false);
  });
});