---
export interface Props {
	url?: string;
	total: string|number;
	current: string|number;
	start?: string|number;
	end?: string|number;
	middle?: string|number;
	before?: string|number;
	after?: string|number;
	index?: boolean;
	commas?: boolean;
	collapse?: boolean;
}
const {
	url="",
	total,
	current,
	start=2,
	end=2,
	middle=2,
	before=middle,
	after=middle,
	index,
	commas=true,
	collapse=true
} = Astro.props as Props;

function disabled(page: number) {
	//Toggle collapsing
	if(!collapse) return false;
	//Skip current page
	else if(+current === page) return false
	//Calc End Pages
	else if(page <= +start || page >= +total - (+end - 1)) return false;
	//Calc before/after (middle) Pages
	else if(page >= +current - +before && page <= +current + +after) return false;
	else return true;
}
---

{ Array.from({ length: +total }, (_, i) => i + 1).map((i) => {
	let slot: string;
	if (+current === i) slot = 'active';
	else if (i !== 1 && disabled(i) && !disabled(i - 1)) slot = 'disabled';
	else if (!disabled(i)) {
		if (i === 1) slot = 'first';
		else if (i === +current - 1) slot = 'before';
		else if (i === +current + 1) slot = 'after';
		else if (i === +total) slot = 'last';
		else slot = 'link';
	}

	const param = {
		number: commas?Intl.NumberFormat('en-us').format(i):i,
		href: i === 1?index?`${url}/`:`${url}/${i}`:`${url}/${i}`,
		slot
	}


	if (!!Object.keys(Astro.slots).length) {
		if (Astro.slots.has(''+i)) return <Fragment set:html={Astro.slots.render(''+i, [param])}/>
		if (Astro.slots.has(slot)) return <Fragment set:html={Astro.slots.render(slot, [param])}/>
		if (slot) return <Fragment set:html={Astro.slots.render('default', [param])}/>
	}
	if (slot === "active") return <span class="active">{param.number}</span>
	if (slot === "disabled") return <span class="disabled">...</span>
	if (slot) return <a href={param.href}>{param.number}</a>
})}