import { compile } from '@tsrx/ripple';

describe('CSS :global with keyframes', () => {
	it('handles -global- prefix for keyframes', () => {
		const source = `
export component Test() {
	<div>{'animated'}</div>

	<style>
		@keyframes -global-foo {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}

		div {
			animation: foo 1s;
		}
	</style>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain('@keyframes foo');
		expect(css).not.toContain('-global-foo');
		expect(css).toContain('animation: foo 1s;');
	});

	it('handles scoped keyframes without -global- prefix', () => {
		const source = `
export component Test() {
	<div>{'animated'}</div>

	<style>
		@keyframes foo {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}
	</style>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toMatch(/@keyframes tsrx-[a-z0-9]+-foo/);
	});

	it('handles mix of global and scoped keyframes', () => {
		const source = `
export component Test() {
	<div class="global-anim">{'one'}</div>
	<div class="scoped-anim">{'two'}</div>

	<style>
		@keyframes -global-fadeIn {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}

		@keyframes slideIn {
			0% { transform: translateX(-100%); }
			100% { transform: translateX(0); }
		}

		.global-anim {
			animation: fadeIn 1s;
		}

		.scoped-anim {
			animation: slideIn 1s;
		}
	</style>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain('@keyframes fadeIn');
		expect(css).not.toContain('-global-fadeIn');
		expect(css).toMatch(/@keyframes tsrx-[a-z0-9]+-slideIn/);
		expect(css).toMatch(/\.scoped-anim\.tsrx-[a-z0-9]+/);
		expect(css).toMatch(/\.global-anim\.tsrx-[a-z0-9]+/);
	});

	it('handles multiple animations with global keyframes', () => {
		const source = `
export component Test() {
	<div>{'animated'}</div>

	<style>
		@keyframes -global-foo {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}

		@keyframes -global-bar {
			0% { transform: scale(0); }
			100% { transform: scale(1); }
		}
	</style>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain('@keyframes foo');
		expect(css).toContain('@keyframes bar');
	});

	it('handles animation property referencing keyframes (not marking as unused)', () => {
		const source = `
export component Parent() {
	<div class="parent">
		<Child />
	</div>

	<style>
		/* Scoped keyframe - only usable within Parent */
		@keyframes slideIn {
			from { transform: translateX(-100%); }
			to { transform: translateX(0); }
		}

		/* Global keyframe - usable in any component */
		@keyframes -global-fadeIn {
			0% { opacity: 0; }
			100% { opacity: 1; }
		}

		.parent {
			animation: slideIn 1s;
		}
	</style>
}

component Child() {
	<div class="child">{'Child content'}</div>

	<style>
		.child {
			animation: fadeIn 3s; /* Uses global fadeIn from Parent */
		}
	</style>
}`;
		const { css } = compile(source, 'test.tsrx');

		// Parent should have scoped slideIn and global fadeIn
		expect(css).toMatch(/@keyframes tsrx-[a-z0-9]+-slideIn/);
		expect(css).toContain('@keyframes fadeIn');
		expect(css).not.toContain('-global-fadeIn');

		// Parent .parent should reference scoped slideIn
		expect(css).toMatch(
			/\.parent\.tsrx-[a-z0-9]+\s*{[\s\S]*?animation:\s*tsrx-[a-z0-9]+-slideIn 1s/,
		);

		// .parent should NOT be marked as unused
		expect(css).not.toContain('(unused) .parent');

		// Child .child should reference global fadeIn
		expect(css).toMatch(/\.child\.tsrx-[a-z0-9]+\s*{[\s\S]*?animation:\s*fadeIn 3s/);

		// .child should NOT be marked as unused
		expect(css).not.toContain('(unused) .child');
	});
});