import { ReactNode } from 'react'
import { EventHandlerArg } from 'typings/generic'
import { GalleryState } from './State'

/**
 * GALLERY FUNCTION AND ARGUMENT TYPES
 */
export type GalleryEventHandlerArgs = EventHandlerArg<GalleryProps, GalleryState>
export interface GalleryEventHandler extends Function {
  (args?: GalleryEventHandlerArgs): void
}

export interface GalleryItemRenderProp extends Function {
  (itemProps?: ItemProps, index?: number, props?: GalleryProps): ReactNode
}
export interface GalleryRenderProp extends Function {
  (props?: GalleryProps): ReactNode
}

/**
 * ITEM PROPS
 */
export interface ItemProps { }

/**
 * GALLERY LIST TYPE
 */
export type GalleryListType = Array<ItemProps>

/**
 * GALLERY PROPS
 */
export interface GalleryProps {
  className?: string
  children?: ReactNode

  state?: DefaultGalleryState
  /**
   * user properties
   */
  list?: Array<GalleryListType>
  startSlideIndex?: number | string
  shouldHaveBullets?: boolean
  shouldHaveArrows?: boolean

  /**
   * additional props
   */
  displayCountOnMobile?: number | string
  displayCountOnTablet?: number | string
  displayCountOnDesktop?: number | string

  /**
   * renderProps
   */
  renderBullet?: Function
  renderItem?: GalleryItemRenderProp
  renderNavigations?: GalleryRenderProp
  // renderList?: GalleryRenderProp
  // renderBulletList?: GalleryRenderProp
  renderWrapper?: GalleryRenderProp
}

/**
 * GALLERY STATE
 * as we are using this as implements so function needs to be decalred as like below
 */
export interface DefaultGalleryState {
  startSlideIndex?: number
  currentSlideIndex?: number
  totalSlidesCount?: number

  onChange?: GalleryEventHandler
  handlePrevClick?: GalleryEventHandler
  handleNextClick?: GalleryEventHandler
  handleBulletClick?: GalleryEventHandler
}