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

describe('CSS :global with advanced selectors', () => {
	it('handles :global with ::slotted()', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<slot />
		</div>

		<style>
			:global(::slotted(*)) {
				color: red;
			}

			div :global(::slotted(span)) {
				color: blue;
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ ::slotted\(span\) {/);
		expect(css).toContain('::slotted(*) {');
	});

	it('handles :global with ::part()', () => {
		const source = `
export function Test() @{
	<>
		<div>{'content'}</div>

		<style>
			:global(::part(button)) {
				color: red;
			}

			div :global(::part(input)) {
				border: 1px solid blue;
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toMatch(/div\.tsrx-[a-z0-9]+ ::part\(input\) {/);
		expect(css).toContain('::part(button) {');
	});

	it('handles :global with :host and :host-context', () => {
		const source = `
export function Test() @{
	<>
		<div>{'content'}</div>

		<style>
			:global(:host) {
				display: block;
			}

			:global(:host(.active)) {
				color: red;
			}

			:global(:host-context(.dark)) {
				background: black;
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain(':host {');
		expect(css).toContain(':host(.active) {');
		expect(css).toContain(':host-context(.dark) {');
	});

	it('handles :global with complex :nth-* selectors', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<span>{'one'}</span>
			<span>{'two'}</span>
			<span>{'three'}</span>
		</div>

		<style>
			:global(span:nth-child(odd)) {
				color: red;
			}

			:global(span:nth-last-child(2)) {
				color: blue;
			}

			:global(div:nth-of-type(3n+1)) {
				margin-top: 10px;
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain('span:nth-child(odd) {');
		expect(css).toContain('span:nth-last-child(2) {');
		expect(css).toContain('div:nth-of-type(3n+1) {');
	});

	it('handles :global with language and directional pseudo-classes', () => {
		const source = `
export function Test() @{
	<>
		<div>{'content'}</div>

		<style>
			:global(:lang(en)) {
				quotes: '"' '"';
			}

			:global(:dir(rtl)) {
				direction: rtl;
			}

			:global(div:lang(fr)) {
				quotes: '«' '»';
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain(':lang(en) {');
		expect(css).toContain(':dir(rtl) {');
		expect(css).toContain('div:lang(fr) {');
	});

	it('handles :global with :focus-within and :focus-visible', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<input type="text" />
		</div>

		<style>
			:global(div:focus-within) {
				border: 2px solid blue;
			}

			:global(input:focus-visible) {
				outline: 2px solid red;
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain('div:focus-within {');
		expect(css).toContain('input:focus-visible {');
	});

	it('handles :global with :any-link, :target, :scope', () => {
		const source = `
export function Test() @{
	<>
		<div>
			<a href="#">{'link'}</a>
		</div>

		<style>
			:global(:any-link) {
				color: blue;
			}

			:global(:target) {
				background: yellow;
			}

			:global(:scope) {
				border: 1px solid black;
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain(':any-link {');
		expect(css).toContain(':target {');
		expect(css).toContain(':scope {');
	});

	it('handles :global with form-related pseudo-classes', () => {
		const source = `
export function Test() @{
	<>
		<form>
			<input type="text" required />
			<input type="checkbox" checked />
		</form>

		<style>
			:global(input:required) {
				border-color: red;
			}

			:global(input:optional) {
				border-color: gray;
			}

			:global(input:checked) {
				background: blue;
			}

			:global(input:disabled) {
				opacity: 0.5;
			}

			:global(input:read-only) {
				background: lightgray;
			}

			:global(input:valid) {
				border-color: green;
			}

			:global(input:invalid) {
				border-color: red;
			}
		</style>
	</>
}`;
		const { css } = compile(source, 'test.tsrx');

		expect(css).toContain('input:required {');
		expect(css).toContain('input:optional {');
		expect(css).toContain('input:checked {');
		expect(css).toContain('input:disabled {');
		expect(css).toContain('input:read-only {');
		expect(css).toContain('input:valid {');
		expect(css).toContain('input:invalid {');
	});
});