import { useEffect, useMemo, useState } from 'react';
import { Platform, useWindowDimensions, PlatformOSType, PixelRatio } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

// Define Media queries

export const useResponsiveLayout = (): ResponsiveLayoutProps => {
  const { width, height, fontScale } = useWindowDimensions();
  const { top, bottom } = useSafeAreaInsets();
  const [platform, setPlatform] = useState<PlatformOSType>(Platform.OS);

  // based on iPhone 13's scale
  const scale = height / 844;

  const normalizeSize = (size: number) => {
    const newSize = size * scale;
    if (Platform.OS === 'ios') {
      return Math.round(PixelRatio.roundToNearestPixel(newSize));
    } else {
      return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
    }
  };

  const deviceType = useMemo(() => {
    const isHandHeld = Platform.OS === 'android' || Platform.OS === 'ios';
    let onMobile = false;
    let onTabletSM = false;
    let onTabletMD = false;
    let onTabletLG = false;
    let onDesktop = false;
    if (width <= 480) {
      onMobile = true;
    } else if (width > 480 && width <= 654) {
      onTabletSM = true;
    } else if (width > 654 && width <= 864) {
      onTabletMD = true;
    } else if (width > 864 && width <= 1024) {
      onTabletLG = true;
    } else {
      onDesktop = true;
    }
    return {
      isHandHeld,
      isMobile: onMobile,
      isTabletSM: onTabletSM,
      isTabletMD: onTabletMD,
      isTabletLG: onTabletLG,
      isDesktop: onDesktop,
    };
  }, [width]);
  useEffect(() => {
    setPlatform(Platform.OS);
  }, []);

  return {
    top,
    bottom,
    width,
    height,
    scale,
    fontScale,
    platform,
    normalizeSize,
    isHandHeld: deviceType.isHandHeld,
    isMobile: deviceType.isMobile,
    isSmall: deviceType.isMobile || deviceType.isTabletSM,
    isTablet: deviceType.isTabletSM || deviceType.isTabletMD || deviceType.isTabletLG,
    isTabletSM: deviceType.isTabletSM,
    isTabletMD: deviceType.isTabletMD,
    isTabletLG: deviceType.isTabletLG,
    isDesktop: deviceType.isDesktop,
  };
};

interface ResponsiveLayoutProps {
  top: number;
  bottom: number;
  width: number;
  height: number;
  scale: number;
  fontScale: number;
  platform: PlatformOSType;
  normalizeSize: (size: number) => number;
  isSmall: boolean;
  isHandHeld: boolean;
  isMobile: boolean;
  isTablet: boolean;
  isTabletSM: boolean;
  isTabletMD: boolean;
  isTabletLG: boolean;
  isDesktop: boolean;
}