import { useEffect, useState } from 'react';

const DESKTOP_MIN = 992;
const WIDE_DESKTOP_MIN = 1280;

export interface DesktopViewportState {
  isDesktop: boolean;
  isWideDesktop: boolean;
}

export function useIsDesktopViewport(): DesktopViewportState {
  const [state, setState] = useState<DesktopViewportState>(() => ({
    isDesktop: typeof window !== 'undefined' ? window.innerWidth >= DESKTOP_MIN : false,
    isWideDesktop: typeof window !== 'undefined' ? window.innerWidth >= WIDE_DESKTOP_MIN : false,
  }));

  useEffect(() => {
    const desktopQuery = window.matchMedia(`(min-width: ${DESKTOP_MIN}px)`);
    const wideQuery = window.matchMedia(`(min-width: ${WIDE_DESKTOP_MIN}px)`);

    const update = (): void => {
      setState({
        isDesktop: desktopQuery.matches,
        isWideDesktop: wideQuery.matches,
      });
    };

    update();
    desktopQuery.addEventListener('change', update);
    wideQuery.addEventListener('change', update);

    return () => {
      desktopQuery.removeEventListener('change', update);
      wideQuery.removeEventListener('change', update);
    };
  }, []);

  return state;
}