import { useMediaQuery } from 'usehooks-ts';

import { isMobileBrowser } from '@/utils/device';

import { useBreakpointMd } from './useBreakpoint';

type DeviceAttributesReturn = [
  isMobile: boolean,
  isTouch: boolean,
  isSmallScreen: boolean,
] & {
  hasPointerCoarse: boolean;
  hasPointerFine: boolean;
  hasReducedMotion: boolean;
  hasHover: boolean;
  isTouch: boolean;
  isMobileUserAgent: boolean;
  isMobile: boolean;
  isSmallScreen: boolean;
};

export default function useDeviceAttributes() {
  const hasPointerCoarse = useMediaQuery('(pointer: coarse)');
  const hasPointerFine = useMediaQuery('(pointer: fine)');
  const hasHover = useMediaQuery('(hover: hover)');
  const hasReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
  const isSmallScreen = !useBreakpointMd();

  const isTouch =
    hasPointerCoarse ||
    (typeof window !== 'undefined' && 'ontouchstart' in window) ||
    (typeof navigator !== 'undefined' && navigator?.maxTouchPoints > 0);

  const isMobileUserAgent = isMobileBrowser();
  const isMobile =
    (isTouch && isSmallScreen) ||
    (hasPointerCoarse && !hasPointerFine) ||
    (isSmallScreen && isMobileUserAgent) ||
    (!hasHover && isTouch);

  const result = [isMobile, isTouch, isSmallScreen] as DeviceAttributesReturn;

  result.hasPointerCoarse = hasPointerCoarse;
  result.hasPointerFine = hasPointerFine;
  result.hasReducedMotion = hasReducedMotion;
  result.hasHover = hasHover;
  result.isTouch = isTouch;
  result.isMobileUserAgent = isMobileUserAgent;
  result.isMobile = isMobile;
  result.isSmallScreen = isSmallScreen;

  return result;
}