// src/styles/breakpoints.tsx
import { css } from "@emotion/react";
import { debounce } from "lodash-es";
import { Fragment, useLayoutEffect, useState } from "react";
import { jsx } from "@emotion/react/jsx-runtime";
var Breakpoints = /* @__PURE__ */ ((Breakpoints2) => {
  Breakpoints2["sm"] = "sm";
  Breakpoints2["md"] = "md";
  Breakpoints2["lg"] = "lg";
  return Breakpoints2;
})(Breakpoints || {});
var breakpoints = {
  ["sm" /* sm */]: 640,
  ["md" /* md */]: 834,
  ["lg" /* lg */]: 1200
};
var BreakpointRanges = /* @__PURE__ */ ((BreakpointRanges2) => {
  BreakpointRanges2["sm"] = "sm";
  BreakpointRanges2["lg"] = "lg";
  BreakpointRanges2["minSmMaxMd"] = "minSmMaxMd";
  BreakpointRanges2["minMdMaxLg"] = "minMdMaxLg";
  BreakpointRanges2["minSmMaxLg"] = "minSmMaxLg";
  BreakpointRanges2["maxLg"] = "maxLg";
  BreakpointRanges2["maxMd"] = "maxMd";
  BreakpointRanges2["minSm"] = "minSm";
  BreakpointRanges2["minMd"] = "minMd";
  return BreakpointRanges2;
})(BreakpointRanges || {});
var breakpointFn = (mq) => (style) => `@media ${mq} { ${style} }`;
var bp = {
  key: Breakpoints,
  ["sm" /* sm */]: breakpointFn(`(max-width:${breakpoints.sm}px)`),
  ["lg" /* lg */]: breakpointFn(`(min-width:${breakpoints.lg}px)`),
  ["minSmMaxLg" /* minSmMaxLg */]: breakpointFn(
    `(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.lg - 1}px)`
  ),
  ["minSmMaxMd" /* minSmMaxMd */]: breakpointFn(
    `(min-width:${breakpoints.sm + 1}px) and (max-width:${breakpoints.md - 1}px)`
  ),
  ["minMdMaxLg" /* minMdMaxLg */]: breakpointFn(
    `(min-width:${breakpoints.md}px) and (max-width:${breakpoints.lg - 1}px)`
  ),
  ["maxLg" /* maxLg */]: breakpointFn(`(max-width:${breakpoints.lg - 1}px)`),
  ["maxMd" /* maxMd */]: breakpointFn(`(max-width:${breakpoints.md - 1}px)`),
  ["minSm" /* minSm */]: breakpointFn(`(min-width:${breakpoints.sm + 1}px)`),
  ["minMd" /* minMd */]: breakpointFn(`(min-width:${breakpoints.md + 1}px)`),
  current: function(assertBp) {
    const currentBp = (
      /* window is undefined in first server side render for Next apps: */
      typeof window === "undefined" ? "sm" /* 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" /* sm */) {
      return smVal;
    } else if (currentBp === "minSmMaxMd" /* minSmMaxMd */) {
      return minSmMaxMdVal;
    } else if (currentBp === "minMdMaxLg" /* minMdMaxLg */) {
      return minMdMaxLgVal;
    }
    return lgVal;
  },
  isSm: () => bp.current("sm" /* sm */),
  isMinSm: () => bp.current("minSm" /* minSm */),
  isMinSmMaxMd: () => bp.current("minSmMaxMd" /* minSmMaxMd */),
  isMinMdMaxLg: () => bp.current("minMdMaxLg" /* minMdMaxLg */),
  isLg: () => bp.current("lg" /* lg */)
};
function inRange(currentBp, assertBp) {
  const isSm = currentBp === "sm" /* sm */;
  const isMinSmMaxMd = currentBp === "minSmMaxMd" /* minSmMaxMd */;
  const isMinMdMaxLg = currentBp === "minMdMaxLg" /* minMdMaxLg */;
  const isLg = currentBp === "lg" /* lg */;
  if (assertBp) {
    switch (assertBp) {
      case "sm" /* sm */:
        return isSm;
      case "minSmMaxMd" /* minSmMaxMd */:
        return isMinSmMaxMd;
      case "minMdMaxLg" /* minMdMaxLg */:
        return isMinMdMaxLg;
      case "lg" /* lg */:
        return isLg;
      case "minSmMaxLg" /* minSmMaxLg */:
        return isMinSmMaxMd || isMinMdMaxLg;
      case "maxLg" /* maxLg */:
        return isSm || isMinSmMaxMd || isMinMdMaxLg;
      case "maxMd" /* maxMd */:
        return isSm || isMinSmMaxMd;
      case "minSm" /* minSm */:
        return isMinSmMaxMd || isMinMdMaxLg || isLg;
      case "minMd" /* 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;
}
var DisplayBreakpoint = ({
  sm,
  minSmMaxMd,
  minMdMaxLg,
  lg,
  maxLg,
  maxMd,
  minSm,
  minMd,
  cssStr,
  children
}) => {
  const breakpoint = (() => {
    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;
    }
  })();
  return /* @__PURE__ */ jsx(
    "div",
    {
      css: css`
        display: none;
        ${breakpoint(`display: block; ${cssStr}`)}
      `,
      children
    }
  );
};
function Breakpoint({
  sm,
  minSmMaxMd,
  minMdMaxLg,
  lg,
  maxLg,
  maxMd,
  minSm,
  minMd,
  children
}) {
  const bp2 = useBreakpoints();
  const shouldRender = (() => {
    switch (true) {
      case sm:
        return bp2.current("sm" /* sm */);
      case minSmMaxMd:
        return bp2.current("minSmMaxMd" /* minSmMaxMd */);
      case minMdMaxLg:
        return bp2.current("minMdMaxLg" /* minMdMaxLg */);
      case lg:
        return bp2.current("lg" /* lg */);
      case maxLg:
        return bp2.current("maxLg" /* maxLg */);
      case maxMd:
        return bp2.current("maxMd" /* maxMd */);
      case minSm:
        return bp2.current("minSm" /* minSm */);
      case minMd:
        return bp2.current("minMd" /* minMd */);
      default:
        return bp2.current("sm" /* sm */);
    }
  })();
  return shouldRender ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
}

export {
  Breakpoints,
  BreakpointRanges,
  bp,
  useBreakpoints,
  useScreenWidth,
  DisplayBreakpoint,
  Breakpoint
};
