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

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 { HtmlBlock } from './HtmlBlock';

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);
  });
}

describe('HtmlBlock render ignores the style prop (matches toHtml)', () => {
  test('a stored backgroundColor/color/padding is NOT applied to the wrapper', () => {
    render(
      React.createElement(HtmlBlock as any, {
        code: '<p>hello</p>',
        style: { backgroundColor: 'rgb(255, 0, 0)', color: 'rgb(0, 0, 255)', padding: '40px' },
      }),
    );
    const wrapper = container.firstElementChild as HTMLElement;
    expect(wrapper.style.backgroundColor).toBe('');
    expect(wrapper.style.color).toBe('');
    expect(wrapper.style.padding).toBe('');
  });

  test('the editor affordances survive: minHeight is kept, content still renders', () => {
    render(React.createElement(HtmlBlock as any, { code: '<p>hello</p>', style: {} }));
    const wrapper = container.firstElementChild as HTMLElement;
    expect(wrapper.style.minHeight).toBe('40px');
    expect(wrapper.innerHTML).toContain('hello');
  });
});