import React from 'react'
import { CarouselBullet } from './CarouselBullet'
import { CarouselArrow } from './CarouselArrow'
import { getCarouselPanelWidth, getValidNumber } from './deps'
import {
  MediaCarouselProps,
  CarouselItemProps,
  MediaCarouselStateType,
} from './typings'
import {
  CarouselWrapper,
  CarouselPanel,
  ItemListPanel,
  ItemPanel,
  StyledImage,
} from './styled'

function defaultRenderArrows(
  props: MediaCarouselProps,
  state: MediaCarouselStateType
) {
  return <CarouselArrow {...props} state={state} />
}

function defaultRenderBullets(
  props: MediaCarouselProps,
  state: MediaCarouselStateType
) {
  return <CarouselBullet {...props} state={state} />
}

function defaultRenderItem(
  item: CarouselItemProps,
  state: MediaCarouselStateType
) {
  return <StyledImage src={item.src} alt={item.src} />
}

function defaultRenderList(
  props: MediaCarouselProps,
  state: MediaCarouselStateType
) {
  const { renderItem, list, gridGap, ...remainingProps } = props

  const flexWidth = getCarouselPanelWidth({ list, ...remainingProps })
  const margin = getValidNumber(gridGap)

  return list.map((item, index) => {
    return (
      <ItemPanel key={index} gridGap={margin} flexWidth={flexWidth}>
        {renderItem(item, state)}
      </ItemPanel>
    )
  })
}

function defaultRenderCarouselPanel(
  props: MediaCarouselProps,
  state: MediaCarouselStateType
) {
  const { renderArrows, renderList, gridGap, ...remainingProps } = props
  const { translatePercentage } = state
  const margin = getValidNumber(gridGap)
  return (
    <CarouselPanel gridGap={margin}>
      <ItemListPanel translatePercentage={translatePercentage}>
        {renderList({ gridGap, ...remainingProps }, state)}
      </ItemListPanel>
      {renderArrows({ gridGap, ...remainingProps }, state)}
    </CarouselPanel>
  )
}

function defaultRenderWrapper(
  props: MediaCarouselProps,
  state?: MediaCarouselStateType
) {
  const { className, children } = props
  return <CarouselWrapper className={className}>{children}</CarouselWrapper>
}

export {
  defaultRenderArrows,
  defaultRenderItem,
  defaultRenderList,
  defaultRenderBullets,
  defaultRenderCarouselPanel,
  defaultRenderWrapper,
}