import { debounce } from "lodash-es";
import { Fragment, useLayoutEffect, useState } from "react";
import { css } from "@emotion/react";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/styles/breakpoints.tsx
/** @jsxImportSource @emotion/react */
let Breakpoints = /* @__PURE__ */ function(Breakpoints) {
	Breakpoints["sm"] = "sm";
	Breakpoints["md"] = "md";
	Breakpoints["lg"] = "lg";
	return Breakpoints;
}({});
const breakpoints = {
	["sm"]: 640,
	["md"]: 834,
	["lg"]: 1200
};
let BreakpointRanges = /* @__PURE__ */ function(BreakpointRanges) {
	BreakpointRanges["sm"] = "sm";
	BreakpointRanges["lg"] = "lg";
	BreakpointRanges["minSmMaxMd"] = "minSmMaxMd";
	BreakpointRanges["minMdMaxLg"] = "minMdMaxLg";
	BreakpointRanges["minSmMaxLg"] = "minSmMaxLg";
	BreakpointRanges["maxLg"] = "maxLg";
	BreakpointRanges["maxMd"] = "maxMd";
	BreakpointRanges["minSm"] = "minSm";
	BreakpointRanges["minMd"] = "minMd";
	return BreakpointRanges;
}({});
const breakpointFn = (mq) => (style) => `@media ${mq} { ${style} }`;
const bp = {
	key: Breakpoints,
	["sm"]: breakpointFn(`(max-width:${breakpoints.sm}px)`),
	["lg"]: breakpointFn(`(min-width:${breakpoints.lg}px)`),
	["minSmMaxLg"]: breakpointFn(`(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.lg - 1}px)`),
	["minSmMaxMd"]: breakpointFn(`(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.md - 1}px)`),
	["minMdMaxLg"]: breakpointFn(`(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 1}px)`),
	["maxLg"]: breakpointFn(`(max-width:${breakpoints.lg - 1}px)`),
	["maxMd"]: breakpointFn(`(max-width:${breakpoints.md - 1}px)`),
	["minSm"]: breakpointFn(`(min-width:${breakpoints.sm + 1}px)`),
	["minMd"]: breakpointFn(`(min-width:${breakpoints.md + 1}px)`),
	current: function(assertBp) {
		const currentBp = typeof window === "undefined" ? "sm" : window.getComputedStyle(document.body, ":before").content.replace(/"/g, "");
		if (assertBp) return inRange(currentBp, assertBp);
		return currentBp;
	},
	switch: (smVal, minSmMaxMdVal, minMdMaxLgVal, lgVal) => {
		const currentBp = bp.current();
		if (currentBp === "sm") return smVal;
		else if (currentBp === "minSmMaxMd") return minSmMaxMdVal;
		else if (currentBp === "minMdMaxLg") return minMdMaxLgVal;
		return lgVal;
	},
	isSm: () => bp.current("sm"),
	isMinSm: () => bp.current("minSm"),
	isMinSmMaxMd: () => bp.current("minSmMaxMd"),
	isMinMdMaxLg: () => bp.current("minMdMaxLg"),
	isLg: () => bp.current("lg")
};
function inRange(currentBp, assertBp) {
	const isSm = currentBp === "sm";
	const isMinSmMaxMd = currentBp === "minSmMaxMd";
	const isMinMdMaxLg = currentBp === "minMdMaxLg";
	const isLg = currentBp === "lg";
	if (assertBp) switch (assertBp) {
		case "sm": return isSm;
		case "minSmMaxMd": return isMinSmMaxMd;
		case "minMdMaxLg": return isMinMdMaxLg;
		case "lg": return isLg;
		case "minSmMaxLg": return isMinSmMaxMd || isMinMdMaxLg;
		case "maxLg": return isSm || isMinSmMaxMd || isMinMdMaxLg;
		case "maxMd": return isSm || isMinSmMaxMd;
		case "minSm": return isMinSmMaxMd || isMinMdMaxLg || isLg;
		case "minMd": return isMinMdMaxLg || isLg;
		default: return false;
	}
	return false;
}
function useBreakpoints() {
	const [currentBp, setCurrentBp] = useState(bp.current());
	useLayoutEffect(() => {
		const handleResize = () => {
			const newBp = bp.current();
			if (newBp !== currentBp) setCurrentBp(newBp);
		};
		handleResize();
		window.addEventListener("resize", handleResize);
		window.addEventListener("deviceorientation", handleResize);
		return () => {
			window.removeEventListener("resize", handleResize);
			window.removeEventListener("deviceorientation", handleResize);
		};
	});
	return bp;
}
function useScreenWidth() {
	const [screenWidth, setScreenWidth] = useState(window.innerWidth);
	useLayoutEffect(() => {
		const handleResize = debounce(() => {
			setScreenWidth(window.innerWidth);
		}, 200);
		handleResize();
		window.addEventListener("resize", handleResize);
		window.addEventListener("deviceorientation", handleResize);
		return () => {
			window.removeEventListener("resize", handleResize);
			window.removeEventListener("deviceorientation", handleResize);
		};
	});
	return screenWidth;
}
const DisplayBreakpoint = ({ sm, minSmMaxMd, minMdMaxLg, lg, maxLg, maxMd, minSm, minMd, cssStr, children }) => {
	return /* @__PURE__ */ jsx("div", {
		css: css`
        display: none;
        ${(() => {
			switch (true) {
				case sm: return bp.sm;
				case minSmMaxMd: return bp.minSmMaxMd;
				case minMdMaxLg: return bp.minMdMaxLg;
				case lg: return bp.lg;
				case maxLg: return bp.maxLg;
				case maxMd: return bp.maxMd;
				case minSm: return bp.minSm;
				case minMd: return bp.minMd;
				default: return bp.sm;
			}
		})()(`display: block; ${cssStr}`)}
      `,
		children
	});
};
function Breakpoint({ sm, minSmMaxMd, minMdMaxLg, lg, maxLg, maxMd, minSm, minMd, children }) {
	const bp = useBreakpoints();
	return (() => {
		switch (true) {
			case sm: return bp.current("sm");
			case minSmMaxMd: return bp.current("minSmMaxMd");
			case minMdMaxLg: return bp.current("minMdMaxLg");
			case lg: return bp.current("lg");
			case maxLg: return bp.current("maxLg");
			case maxMd: return bp.current("maxMd");
			case minSm: return bp.current("minSm");
			case minMd: return bp.current("minMd");
			default: return bp.current("sm");
		}
	})() ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
}
//#endregion
export { Breakpoint, BreakpointRanges, Breakpoints, DisplayBreakpoint, bp, useBreakpoints, useScreenWidth };
