import { ReactNode } from 'react'

interface MediaCarouselRenderProp extends Function {
  (props: MediaCarouselProps, state?: MediaCarouselState): ReactNode
}

interface StepperEventHandler extends Function {
  (props: Event): void
}

interface StepperProps extends MediaCarouselProps {
  isAbsolute?: boolean
  align?: string
  order?: number
  arrow?: string | Function
  onClick?: StepperEventHandler
  isDisabled?: boolean
}

interface DeviceSpecificProps {
  desktop?: number | string
  tablet?: number | string
  mobile?: number | string
}

interface MediaCarouselProps {
  className?: string
  children?: string
  state?: MediaCarouselState
  gridGap?: number
  desktopColspan?: number
  tabletColspan?: number
  mobileColspan?: number
  bulletSize?: number | string
  bulletColor?: string
  list?: Array<ImageComponentProps>
  type?: string
  hasBullets?: boolean
  hasNavigations?: boolean
  arrowImageSrc?: string
  arrowIconColor?: string
  arrowIconSize?: number | string
  // renderProps
  renderComponent?: ImageComponentProps
  renderWrapper?: MediaCarouselRenderProp
}

interface BaseComponentProps {}

interface ImageComponentProps extends BaseComponentProps {
  src?: string
}

interface MediaCarouselState {
  setList(list: number[]): MediaCarouselState
  setPosition(position: number): MediaCarouselState
  setPick(pick: number): MediaCarouselState
  handleBullet(event: Event): void
  //
  forwards(): void
  backwards(): void
  pickPrevious(): void
  pickNext(): void
}

export {
  StepperProps,
  DeviceSpecificProps,
  BaseComponentProps,
  ImageComponentProps,
  MediaCarouselState,
  MediaCarouselProps,
  MediaCarouselRenderProp,
}