import React from 'react'
import { toNumber } from 'exotic'
import { getValidNumber } from '../deps'
import { MediaCarouselStateType } from '../typings'
import { CarouselBulletProps } from './typings'
import { BulletIcon, BulletsPanel } from './styled'

function defaultRenderBulletItem(
  props: CarouselBulletProps,
  state: MediaCarouselStateType
) {
  const { index, bulletColor, bulletSize } = props
  const bulletDimension = getValidNumber(bulletSize)
  const { position, goTo } = state
  const shouldActive = index === position
  const handleBulletClick = (e: Event) => {
    const bulletIndex = e.target.getAttribute('data-key')
    goTo(toNumber(bulletIndex))
  }
  return (
    <BulletIcon
      key={index}
      data-key={index}
      bulletColor={bulletColor}
      bulletSize={bulletDimension}
      shouldActive={shouldActive}
      onClick={handleBulletClick}
    />
  )
}

function defaultRenderBulletList(
  props: CarouselBulletProps,
  state: MediaCarouselStateType
) {
  const { renderBulletItem, ...remainingProps } = props
  const { slides } = state
  const bulletsView = []
  for (let index = 0; index < slides; index++) {
    const bullet = renderBulletItem({ index, ...remainingProps }, state)
    bulletsView.push(bullet)
  }
  return <BulletsPanel>{bulletsView}</BulletsPanel>
}

export { defaultRenderBulletItem, defaultRenderBulletList }