import { application } from '@skava/state'
import { isArray, isNumber, fromIshToNumber } 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
  }
}

const getDeviceColSpan = (props: MediaCarouselProps) => {
  const currentDevice = application.isDesktop
    ? 'desktop'
    : application.isTablet
      ? 'tablet'
      : 'mobile'
  return props[currentDevice + 'ColSpan']
}

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

export {
  getDeviceColSpan,
  getCarouselPanelWidth,
  toMediaCarouselState,
  initMediaCarouselState,
}