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.deviceType
  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 > list.length ? list.length : deviceColSpanAsNumber)
    return 100 / colSpan
  } else {
    return 100
  }
}

export {
  getDeviceColSpan,
  getCarouselPanelWidth,
  toMediaCarouselState,
  initMediaCarouselState
}