import { ReactNode, KeyboardEvent } from 'react'

/**
 * DEFAULT PROPS
 */
interface MediaCarouselCommonProps {
  gridGap?: number
  flexWidth?: 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
}

interface KeyboardEventProps {
  (event: KeyboardEvent): void
}

type CarouselListType = Array<CarouselItemProps>

/**
 * MEDIA CAROUSEL PROPS
 */
interface MediaCarouselProps extends MediaCarouselCommonProps {
  className?: string
  children?: ReactNode
  state?: MediaCarouselStateType
  list?: CarouselListType
  itemHeight?: number | string
  hasBullets?: boolean
  hasArrows?: boolean
  // renderProps
  renderItem?: ItemRenderProp
  renderList?: MediaCarouselRenderProp
  renderArrows?: MediaCarouselRenderProp
  renderBullets?: MediaCarouselRenderProp
  renderWrapper?: MediaCarouselRenderProp
  // handlers
  handleArrowNavigation?: KeyboardEventProps
}

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

declare namespace CssProps {
  export type ItemHeight = number
  export type GridGap = number
  export type FlexWidth = number
  export type TranslatePercentage = number
  export type isActive = boolean
}

export { CarouselItemProps, MediaCarouselProps, CssProps }