import { track, trackAsync } from 'ripple';

export function MixedControlFlowStatic() {
	return <>
		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>
							}
							break;
						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() {
	return <>
		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>
							}
							break;
						default:
							try {
								<p class={`item item-${item.id}`}>{`B:${item.label}`}</p>
							} pending {
								<p class="pending">{'pending b'}</p>
							}
					}
				}
			</div>
		}
	</>;
}

export function MixedControlFlowAsyncPending() {
	return <>
		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>
						}
						break;
					default:
						<div class="unexpected">{'unexpected'}</div>
				}
			}
		}
	</>;
}

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