import { application } from '@skava/state'
import { isArray, isNumber, isString, toNumber } from 'exotic'
import { MediaCarouselState } from './state'
import { MediaCarouselProps } from './typings'

function initMediaCarouselState() {
  return new MediaCarouselState()
}

function toMediaCarouselState(props: MediaCarouselProps) {
  if (props.state === undefined) {
    const state = initMediaCarouselState()
    state.update(props)
    return state
  } else {
    return props.state
  }
}

/**
 * @todo make common in @skava/state
 *
 */

const getDeviceType = () => {
  return application.isDesktop
    ? 'desktop'
    : application.isTablet
      ? 'tablet'
      : 'mobile'
}

const getValidNumber = (val: number | string) => {
  /**
   * @todo validation must be done
   */
  let validNumber
  if (isNumber(val)) {
    validNumber = val
  } else if (isString(val) && val.includes('px')) {
    val.replace('px', '')
    validNumber = toNumber(val)
  } else if (isString(val)) {
    validNumber = toNumber(val)
  }
  return validNumber
}

const getDeviceColSpan = (props: MediaCarouselProps) => {
  const currentDevice = getDeviceType()
  return props[currentDevice + 'ColSpan']
}

const getCarouselPanelWidth = (props: MediaCarouselProps) => {
  const { list } = props
  if (isArray(list) !== undefined) {
    const deviceColSpan = getDeviceColSpan(props)
    const colSpan = deviceColSpan > list.length ? list.length : deviceColSpan
    return 100 / colSpan
  } else {
    return 100
  }
}

export {
  getDeviceColSpan,
  getValidNumber,
  getDeviceType,
  getCarouselPanelWidth,
  toMediaCarouselState,
  initMediaCarouselState,
}