import { describe, test, expect } from 'vitest';
import { templateComponentToTreeNode } from './apply-template';

describe('templateComponentToTreeNode', () => {
  test('converts a childless TemplateComponent to a SerializedTreeNode with an empty `nodes` array', () => {
    const node = templateComponentToTreeNode({ type: 'Heading', props: { text: 'Hi' } });
    expect(node).toEqual({
      type: { resolvedName: 'Heading' },
      props: { text: 'Hi' },
      nodes: [],
    });
  });

  test('regression: recursively converts nested `children` into `nodes` (previously dropped entirely)', () => {
    const node = templateComponentToTreeNode({
      type: 'Container',
      props: { tag: 'header' },
      children: [
        { type: 'Logo', props: { text: 'FlowStack' } },
        { type: 'Menu', props: { links: [] } },
      ],
    });
    expect(node.nodes).toHaveLength(2);
    expect(node.nodes![0]).toEqual({ type: { resolvedName: 'Logo' }, props: { text: 'FlowStack' }, nodes: [] });
    expect(node.nodes![1]).toEqual({ type: { resolvedName: 'Menu' }, props: { links: [] }, nodes: [] });
  });

  test('recurses more than one level deep', () => {
    const node = templateComponentToTreeNode({
      type: 'Section',
      props: {},
      children: [
        {
          type: 'ColumnLayout',
          props: { columns: 1 },
          children: [{ type: 'TextBlock', props: { text: 'deep' } }],
        },
      ],
    });
    const col = node.nodes![0];
    expect(col.type.resolvedName).toBe('ColumnLayout');
    expect(col.nodes![0]).toEqual({ type: { resolvedName: 'TextBlock' }, props: { text: 'deep' }, nodes: [] });
  });

  test('does not mutate the input TemplateComponent', () => {
    const comp = { type: 'Heading', props: { text: 'Hi' } };
    const frozen = JSON.parse(JSON.stringify(comp));
    templateComponentToTreeNode(comp);
    expect(comp).toEqual(frozen);
  });
});