import { describe, it, expect } from 'vitest';
import { flushSync, TrackedArray, track, createRefKey } from 'ripple';

describe('refs', () => {
	it('capture a <div>', () => {
		let div: HTMLDivElement | undefined;

		component Component() {
			<div
				{ref (node: HTMLDivElement) => {
					div = node;
				}}
			>
				{'Hello World'}
			</div>
		}
		render(Component);
		flushSync();
		expect(div?.textContent).toBe('Hello World');
	});

	it('works with spreading from composite component', () => {
		let _node: Child | undefined;

		component Component() {
			let items = TrackedArray.from([1, 2, 3]);

			function componentRef(node: Child) {
				_node = node;
			}

			<Child {ref componentRef} {items} />
		}

		component Child(props: { items: TrackedArray<number> }) {
			const { items, ...rest } = props;
			<pre {...rest}>{JSON.stringify(items)}</pre>
			<pre>{items.length}</pre>
		}

		render(Component);
		flushSync();

		expect(_node).toBe(document.querySelector('pre'));
	});

	it('should handle spreading into composite refs', () => {
		let logs: string[] = [];

		component App() {
			let value = track('test');

			function inputRef(node) {
				logs.push('ref called');
			}

			const props = {
				id: 'example',
				@value,
				[createRefKey()]: inputRef,
			};

			<input type="text" {...props} />

			<Input {...props} />
		}

		component Input({ id, value, ...rest }) {
			<input type="text" {id} {value} {...rest} />
		}

		render(App);
		flushSync();

		expect(logs).toEqual(['ref called', 'ref called']);
	});
});