const REM_PX = 16

function widthLimit(query: string, feature: 'min-width' | 'max-width') {
	const match = query.match(new RegExp(`\\(${feature}:\\s*([\\d.]+)(rem|px)\\)`))
	if (!match) {
		return null
	}
	return Number(match[1]) * (match[2] === 'rem' ? REM_PX : 1)
}

export function setViewportWidth(width: number) {
	window.matchMedia = ((query: string) => {
		const min = widthLimit(query, 'min-width')
		const max = widthLimit(query, 'max-width')
		const matches = (min === null || width >= min) && (max === null || width <= max)
		return {
			matches,
			media: query,
			onchange: null,
			addEventListener: () => undefined,
			removeEventListener: () => undefined,
			addListener: () => undefined,
			removeListener: () => undefined,
			dispatchEvent: () => false,
		}
	}) as unknown as typeof window.matchMedia
}

export const DESKTOP_WIDTH = 1440
export const MOBILE_WIDTH = 390