import { visibility } from '@adalo/constants'
import { IApp } from 'interfaces'
import { getScreenSize } from './responsive'

export const DEVICE_TYPE_MOBILE = 'mobile'
export const DEVICE_TYPE_TABLET = 'tablet'
export const DEVICE_TYPE_DESKTOP = 'desktop'

export const getDeviceType = (
  width: number = getScreenSize().width,
  app?: IApp
): string => {
  const mobileOnly = app?.webSettings?.layoutMode === 'mobile'

  if (width < visibility.MOBILE_BREAKPOINT || mobileOnly) {
    return DEVICE_TYPE_MOBILE
  } else if (
    width >= visibility.MOBILE_BREAKPOINT &&
    width < visibility.TABLET_BREAKPOINT
  ) {
    return DEVICE_TYPE_TABLET
  } else {
    return DEVICE_TYPE_DESKTOP
  }
}