"use client";

import {
  useDebouncedValue,
  useIsClient,
  useWindowEvent,
} from "@simplybusiness/mobius-hooks";
import { useCallback, useMemo, useState } from "react";
import type { SizeType } from "../../types";

export type Breakpoint = {
  size: SizeType;
  value: number;
};
export type BreakpointsType = Breakpoint[];
export type UseBreakpointType = {
  breakpoint: Breakpoint;
  up: (size: SizeType) => boolean | undefined;
  down: (size: SizeType) => boolean | undefined;
};

// Hard code breakpoints for SB designs
export const DEFAULT_BREAKPOINTS = [
  { size: "xs", value: 320 },
  { size: "sm", value: 480 },
  { size: "md", value: 670 },
  { size: "lg", value: 960 },
  { size: "xl", value: 1200 },
  { size: "xxl", value: 1320 },
] as BreakpointsType;

const PASSIVE: AddEventListenerOptions = { passive: true };

const getBreakpoint = (breakpoints: BreakpointsType, windowWidth: number) => {
  // When breakpoint size and windowWidth are a match
  // The addition of 1px ensures the right breakpoint
  const closest = breakpoints.findIndex(
    breakpoint => breakpoint.value >= windowWidth + 1,
  );
  const smallest = breakpoints[0];
  const largest = breakpoints[breakpoints.length - 1];
  const match = breakpoints[closest - 1];

  if (closest === 0) return smallest;
  if (closest === -1) return largest;

  return match;
};

const useBreakpoint = (
  customBreakpoints?: BreakpointsType,
): UseBreakpointType => {
  const isClientSide = useIsClient();
  const breakpoints = customBreakpoints || DEFAULT_BREAKPOINTS;
  const defaultBreakpoint = breakpoints[0];

  const [windowWidth, setWindowWidth] = useState<number>(
    typeof globalThis?.window !== "undefined"
      ? window.innerWidth
      : defaultBreakpoint.value,
  );

  useWindowEvent("resize", () => setWindowWidth(window.innerWidth), PASSIVE);

  const debouncedWidth = useDebouncedValue(windowWidth, 200);

  // Gate on isClientSide so up()/down() also return default-based values
  // during SSR and hydration, matching the server render.
  const currentBreakpoint = useMemo(
    () =>
      !isClientSide || breakpoints.length === 0
        ? defaultBreakpoint
        : getBreakpoint(breakpoints, debouncedWidth),
    [isClientSide, breakpoints, defaultBreakpoint, debouncedWidth],
  );

  const up = useCallback(
    (size: SizeType) => {
      const sizeIndex = breakpoints.findIndex(item => item.size === size);
      if (sizeIndex === -1) {
        return false;
      }
      const currentIndex = breakpoints.findIndex(
        item => item.size === currentBreakpoint.size,
      );

      return currentIndex >= sizeIndex;
    },
    [currentBreakpoint, breakpoints],
  );

  const down = useCallback(
    (size: SizeType) => {
      const sizeIndex = breakpoints.findIndex(item => item.size === size);
      if (sizeIndex === -1) {
        return true;
      }
      const currentIndex = breakpoints.findIndex(
        item => item.size === currentBreakpoint.size,
      );

      return currentIndex <= sizeIndex;
    },
    [currentBreakpoint, breakpoints],
  );

  return {
    breakpoint: currentBreakpoint,
    up,
    down,
  };
};

export { useBreakpoint };
