<script>
	import { onMount } from 'svelte';
	import { Pagination, Loading } from '../../../../../packages/stdf/components';
	import aphorisms from '../../../data/aphorisms';

	// total, usually from backend
	const total = 200;

	// current page
	let current = $state(1);

	// simulate request data
	let data = $state([]);
	let currentPage = $state(1);
	let pageSize = 4;
	let totalData = $state(0);
	let loading = $state(false);
	const getData = () => {
		loading = true;
		// use setTimeout to simulate request
		setTimeout(() => {
			loading = false;
			// get pageSize data from aphorisms randomly
			data = aphorisms.sort(() => Math.random() - 0.5).slice(0, pageSize);
			totalData = 64;
		}, 2000);
	};
	const changePageFunc = c => {
		currentPage = c;
		getData();
	};
	// initial request first page
	onMount(() => {
		getData();
	});
</script>

<div class="m-4 mt-24 font-bold text-lg">Basic usage</div>
<Pagination {total} />

<div class="mx-4 mt-8 font-bold text-lg">Event listening</div>
<div class="mx-4 mb-2 text-sm">Current page: {current}</div>
<Pagination {total} onpre={c => (current = c)} onnext={c => (current = c)} onchange={c => (current = c)} />

<div class="mx-4 mt-24 font-bold text-lg">Initial display omitted page</div>
<div class="mx-4 mb-4 text-xs">Can be used to guide users</div>
<Pagination {total} showNextOmitPage />

<div class="m-4 mt-8 font-bold text-lg">Set initial page</div>
<Pagination {total} current={10} />

<div class="mx-4 mt-8 font-bold text-lg">Max display 11 pages</div>
<div class="mx-4 mb-4 text-xs">Display more pages but the page number is small</div>
<Pagination maxShowPage={11} {total} />

<div class="mx-4 mt-8 font-bold text-lg">Max display 5 pages</div>
<div class="mx-4 mb-4 text-xs">Suitable for scenes with a small paging area</div>
<div class="flex items-center">
	<div class="px-4">This is my territory</div>
	<div class="flex-1">
		<Pagination maxShowPage={5} {total} />
	</div>
</div>

<div class="m-4 mt-8 font-bold text-lg">No data</div>
<Pagination total={0} />

<div class="m-4 mt-8 font-bold text-lg">Only one page</div>
<Pagination total={8} />

<div class="mx-4 mt-8 font-bold text-lg">Total pages are less than the maximum display pages</div>
<div class="mx-4 mb-4 text-xs">No omitted page</div>
<Pagination total={70} />

<div class="mx-4 mt-8 font-bold text-lg">Total pages are less than the maximum display pages</div>
<div class="mx-4 mb-4 text-xs">No omitted page</div>
<Pagination total={90} maxShowPage={7} />

<div class="mx-4 mt-8 font-bold text-lg">Total pages are many</div>
<div class="mx-4 mb-4 text-xs">Will exist two omitted pages</div>
<Pagination {total} />

<div class="m-4 mt-8 font-bold text-lg">Each page is only 3 items</div>
<Pagination total={50} pageSize={3} />

<div class="m-4 mt-8 font-bold text-lg">Highlighted page is border</div>
<Pagination {total} type="border" />

<div class="m-4 mt-8 font-bold text-lg">Highlighted page is block</div>
<Pagination {total} type="block" />

<div class="m-4 mt-8 font-bold text-lg">Increase the radius of the highlighted page</div>
<Pagination {total} type="block" radius="xl" />

<div class="m-4 mt-8 font-bold text-lg">Omitted page column is 2</div>
<Pagination {total} pageCol={2} />

<div class="m-4 mt-8 font-bold text-lg">Inject injClass</div>
<Pagination {total} injClass="mx-2 rounded-full shadow-md dark:shadow-white/10" />

<div class="m-4 mt-8 font-bold text-lg">Simulate request</div>
<div class="px-4 py-8 divide-y divide-black/5 dark:divide-white/5 min-h-[20rem] relative">
	{#each data as item}
		<div class:py-6={pageSize > 1}>
			<div class="text-sm text-justify">{item.text}</div>
			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
		</div>
	{/each}
	{#if loading}
		<div class="absolute inset-0 w-full h-full backdrop-blur flex flex-col justify-center gap-8 text-center">
			<div>Querying the {currentPage} page data...</div>
			<Loading />
		</div>
	{/if}
</div>
<Pagination {pageSize} total={totalData} onchange={changePageFunc} />

<div class="mx-4 mt-8 font-bold text-lg">Continuous mode</div>
<div class="mx-4 mb-4 text-xs">Only allow clicking on the previous and next pages</div>
<Pagination {total} continuous />

<div class="pb-10"></div>
