// import { isArray } from 'exotic'
import { GalleryListType, GalleryProps } from './typings'

/**
 * @todo isArray needs to be used here to make sure the list is array type
 */
const isNonEmptyArray = (list: GalleryListType) => list && list.length > 0

/**
 * get device type based on the window width
 */
function getDeviceType() {
  const screenWidth = window.outerWidth
  const isMobileDevice = (screenWidth <= 767)
  const isTabletDevice = (screenWidth >= 768 && screenWidth <= 1024)
  const isDesktopDevice = (screenWidth > 1024)

  if (isMobileDevice) {
    return 'mobile'
  } else if (isTabletDevice) {
    return 'tablet'
  } else {
    return 'desktop'
  }
}

/**
 * get item display count based on the device type
 */
function getItemDisplayCount(props: GalleryProps) {
  const { displayCountOnMobile, displayCountOnTablet, displayCountOnDesktop, list } = props
  const deviceType = getDeviceType()
  const count = ((deviceType === 'mobile') ? displayCountOnMobile : (deviceType === 'tablet') ? displayCountOnTablet : displayCountOnDesktop)
  // making sure that the display count should not be greater than list length
  if (isNonEmptyArray(list)) {
    if (list.length >= count) {
      return count
    } else {
      return list.length
    }
  } else {
    return 0
  }
}

/**
 * @description used to get item width based displayCount on the device width
 */
function getItemWidth(displayCount: number) {
  /**
   * @todo dynamic width needs to be added here
   */
  const screenWidth = window.outerWidth
  return Math.round(screenWidth / displayCount)
}

export {
  isNonEmptyArray,
  getItemDisplayCount,
  getDeviceType,
  getItemWidth,
}