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

// The stub in vitest.setup.ts is inert: it observes but never fires. This one
// captures the callback so we can simulate the element entering the viewport.
let disparar: (entradas: Partial<IntersectionObserverEntry>[]) => void;

beforeEach(() => {
  vi.stubGlobal(
    'IntersectionObserver',
    class {
      constructor(cb: IntersectionObserverCallback) {
        disparar = (entradas) => cb(entradas as IntersectionObserverEntry[], this as never);
      }
      observe() {}
      unobserve() {}
      disconnect() {}
    },
  );
});

describe('<Revelar />', () => {
  it('no oculta nada por sí mismo', () => {
    // The hidden state is CSS-only, gated on `html.js`. If the component wrote
    // opacity 0 into the inline style we'd be back to the bug this redesign
    // fixes: 112 invisible elements in the export and a blank page whenever
    // the JS doesn't arrive.
    const { container } = render(<Revelar>Tu negocio no necesita más esfuerzo.</Revelar>);
    const el = container.firstElementChild as HTMLElement;
    expect(el.style.opacity).toBe('');
    expect(screen.getByText('Tu negocio no necesita más esfuerzo.')).toBeInTheDocument();
  });

  it('marca el bloque para que el CSS lo pueda gobernar', () => {
    const { container } = render(<Revelar>x</Revelar>);
    expect(container.firstElementChild).toHaveAttribute('data-revelar');
  });

  it('escalona el retardo con el índice', () => {
    const { container } = render(<Revelar indice={3}>x</Revelar>);
    expect((container.firstElementChild as HTMLElement).style.getPropertyValue('--i')).toBe('3');
  });

  it('se marca visible al entrar en viewport', () => {
    const { container } = render(<Revelar>x</Revelar>);
    const el = container.firstElementChild as HTMLElement;
    expect(el).not.toHaveAttribute('data-visible');
    disparar([{ isIntersecting: true, target: el }]);
    expect(el).toHaveAttribute('data-visible');
  });
});