import { describe, test, expect, vi, beforeEach } from 'vitest';
import React from 'react';
import { createRoot, Root } from 'react-dom/client';
import { act } from 'react-dom/test-utils';

/* ImageBlock only needs useNode from @craftjs/core. Mock it following the
   DOM-harness pattern in src/components/basic/Footer.editguard.test.tsx (no
   @testing-library/react in this repo) so we can render the real component
   tree and inspect the emitted <img src> without a real <Editor>. */
vi.mock('@craftjs/core', () => ({
  useNode: (collect?: (node: any) => any) => {
    const node = { events: { selected: false } };
    return {
      connectors: { connect: (el: any) => el, drag: (el: any) => el },
      actions: { setProp: vi.fn() },
      ...(collect ? collect(node) : {}),
    };
  },
}));

import { ImageBlock } from './ImageBlock';

let container: HTMLDivElement;
let root: Root;

function render(ui: React.ReactElement) {
  container = document.createElement('div');
  document.body.appendChild(container);
  act(() => {
    root = createRoot(container);
    root.render(ui);
  });
}

beforeEach(() => {
  vi.clearAllMocks();
});

describe('ImageBlock render falls back to the placeholder for an explicit empty src (Bug 1)', () => {
  test('src="" (explicit, overrides the default parameter) still renders a non-empty placeholder src', () => {
    render(<ImageBlock src="" alt="Image" />);
    const img = container.querySelector('img')!;
    expect(img.getAttribute('src')).not.toBe('');
    expect(img.getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
    container.remove();
  });

  test('src=undefined (default parameter path) still renders the placeholder (unchanged behavior)', () => {
    render(<ImageBlock alt="Image" />);
    const img = container.querySelector('img')!;
    expect(img.getAttribute('src')).not.toBe('');
    expect(img.getAttribute('src')).toMatch(/^data:image\/svg\+xml/);
    container.remove();
  });

  test('a real src is rendered unchanged', () => {
    render(<ImageBlock src="https://example.com/photo.jpg" alt="A photo" />);
    const img = container.querySelector('img')!;
    expect(img.getAttribute('src')).toBe('https://example.com/photo.jpg');
    container.remove();
  });
});