import { ReactNode } from 'react'

/**
 * DEFAULT PROPS
 */
interface MediaCarouselCommonProps {
  type?: string
  gridGap: number
  desktopColSpan: number
  tabletColSpan: number
  mobileColSpan: number
}

/**
 * RENDER PROPS
 */
interface MediaCarouselRenderProp extends Function {
  (props: MediaCarouselProps, state?: MediaCarouselStateType): ReactNode
}

interface ItemRenderProp extends Function {
  (item: CarouselItemProps, state?: MediaCarouselStateType): ReactNode
}

interface CarouselItemProps {
  [key: string]: string | number | boolean
}

type CarouselListType = Array<CarouselItemProps>

/**
 * MEDIA CAROUSEL PROPS
 */
interface MediaCarouselProps extends MediaCarouselCommonProps {
  className?: string
  children?: ReactNode
  state?: MediaCarouselStateType
  list?: CarouselListType

  // renderProps
  renderItem?: ItemRenderProp
  renderBullets?: MediaCarouselRenderProp
  renderArrows?: MediaCarouselRenderProp
  renderList?: MediaCarouselRenderProp
  renderCarouselPanel?: MediaCarouselRenderProp
  renderWrapper?: MediaCarouselRenderProp
}

/**
 * STATE
 */
export interface MediaCarouselStateType {
  position: number
  count: number
  slides: number
  shouldLeftNavActive: boolean
  shouldRightNavActive: boolean
  translatePercentage?: number
  setStep(step: number): void
  setPosition(currentPosition: number): void
  toNext(): void
  toPrevious(): void
  goTo(position: number): void
}

export { CarouselItemProps, MediaCarouselProps }