import React from 'react'
import { toNumber, isSafe, fromIshToNumber } from 'exotic'
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 = isSafe(bulletSize) && fromIshToNumber(bulletSize)
  const { position, goTo } = state
  const isActive = 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}
      isActive={isActive}
      onClick={handleBulletClick}
      tabindex={0}
      aria-label={isActive ? 'Current slide' : `Go to slide ${index + 1}`}
    />
  )
}

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 }