import { track, trackAsync } from 'ripple';

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

export component 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>
					}
					break;
				default:
					<div class="unexpected">{'unexpected'}</div>
			}
		}
	}
}

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