import { reactive } from '#shared/reactive';

export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';

const BREAKPOINT_WIDTHS: [Breakpoint, number][] = [
	['sm', 640],
	['md', 768],
	['lg', 1024],
	['xl', 1280],
	['2xl', 1536],
];

export const breakpoint = reactive({ container: 'lg' as Breakpoint, viewport: 'lg' as Breakpoint });

function updateBreakpoint()
{
	for (let i = BREAKPOINT_WIDTHS.length - 1; i >= 0; i--)
	{
		if (window.innerWidth >= BREAKPOINT_WIDTHS[i]![1])
		{
			const bp = BREAKPOINT_WIDTHS[i]![0];
			breakpoint.viewport = bp;
			breakpoint.container = bp;
			return;
		}
	}
}

if (typeof window !== 'undefined')
{
	updateBreakpoint();

	BREAKPOINT_WIDTHS.forEach(e => window.matchMedia(`(min-width: ${e[1]}px)`).addEventListener('change', updateBreakpoint));
}