import { ReactNode } from 'react'

export interface FlexBoxTemplateRenderProp extends Function {
  (props: FlexBoxTemplateProps): ReactNode
}

/**
 * @description
 * we are using the same property name as that actually in css
 * and all the values of those properties is acceptable
 * NOTE: this is only for container
 * flexWrap -> flex-wrap
 * direction -> flex-direction
 * justifyContent -> justify-content
 * alignItems -> align-items
 */
interface FlexContainerProps {
  flexWrap?: string
  direction?: string
  justifyContent?: string
  alignItems?: string
}

/**
 * @description
 * we are using the same property name as that actually in css
 * and all the values of those properties is acceptable
 *
 * order -> order
 * grow -> flex-grow
 * shrink -> flex-shrink
 * basis -> flex-basis
 * align -> align-self
 */
interface FlexItemProps {
  index?: number
  order?: number | string
  grow?: number
  shrink?: number | string
  basis?: string
  align?: string
}

/**
 * @description
 * for responsive support we are getting 3 props for each devices
 * so, the item width will be rendering based on this column count.
 * To be simple, how many items(with columns) should show in each devices
 */
interface ItemsPerDeviceProps {
  desktopColumn?: number | string
  tabletColumn?: number | string
  mobileColumn?: number | string
}

type FlexBoxListType = Array<FlexItemProps>

export interface FlexBoxTemplateProps extends FlexContainerProps, ItemsPerDeviceProps {
  className?: string
  children?: ReactNode

  // list
  shouldAdapt?: boolean
  gridGap?: number
  list?: FlexBoxListType

  // props
  renderItem?: FlexBoxTemplateRenderProp
  renderList?: FlexBoxTemplateRenderProp
  renderWrapper?: FlexBoxTemplateRenderProp
}

export declare namespace CSS {
  export type GridGap = number
  export type ItemWidth = number
}