import { track, trackAsync } from 'ripple';

export function MixedControlFlowStatic() @{
	const rows = [
		{ id: 1, kind: 'a', enabled: true },
		{ id: 2, kind: 'b', enabled: true },
		{ id: 3, kind: 'a', enabled: false },
	];
	<section class="mixed-static">
		@for (const row of rows; key row.id) {
			@if (row.enabled) {
				@switch (row.kind) {
					@case 'a': {
						@try {
							<div class={`row row-${row.id} kind-a`}>{`A-${row.id}`}</div>
						} @pending {
							<div class={`pending pending-${row.id}`}>{'pending a'}</div>
						}
					}
					@default: {
						@try {
							<div class={`row row-${row.id} kind-b`}>{`B-${row.id}`}</div>
						} @pending {
							<div class={`pending pending-${row.id}`}>{'pending b'}</div>
						}
					}
				}
			}
		}
	</section>
}

export function MixedControlFlowReactive() @{
	let &[show] = track(true);
	let &[mode] = track<'a' | 'b'>('a');
	let &[items] = track([
		{ id: 1, label: 'One' },
		{ id: 2, label: 'Two' },
	]);
	<>
		<button
			class="toggle-show"
			onClick={() => {
				show = !show;
			}}
		>{'Toggle Show'}</button>
		<button
			class="toggle-mode"
			onClick={() => {
				mode = mode === 'a' ? 'b' : 'a';
			}}
		>{'Toggle Mode'}</button>
		<button
			class="add-item"
			onClick={() => {
				items = [...items, { id: 3, label: 'Three' }];
			}}
		>{'Add Item'}</button>
		@if (show) {
			<div class="mixed-reactive-list">
				@for (const item of items; key item.id) {
					@switch (mode) {
						@case 'a': {
							@try {
								<p class={`item item-${item.id}`}>{`A:${item.label}`}</p>
							} @pending {
								<p class="pending">{'pending a'}</p>
							}
						}
						@default: {
							@try {
								<p class={`item item-${item.id}`}>{`B:${item.label}`}</p>
							} @pending {
								<p class="pending">{'pending b'}</p>
							}
						}
					}
				}
			</div>
		}
	</>
}

export function MixedControlFlowAsyncPending() @{
	const rows = [1, 2];
	const state = 'slow';
	<>
		<div class="before">{'before'}</div>
		@for (const row of rows) {
			@if (row === 1) {
				@switch (state) {
					@case 'slow': {
						@try {
							<AsyncRow label={`row-${row}`} />
						} @pending {
							<div class={`pending-row pending-row-${row}`}>{`pending ${row}`}</div>
						}
					}
					@default: {
						<div class="unexpected">{'unexpected'}</div>
					}
				}
			}
		}
	</>
}

function AsyncRow({ label }: { label: string }) @{
	let &[value] = trackAsync(() => Promise.resolve(label));
	<div class="resolved-row">{value}</div>
}