import { ReactNode } from 'react'
import { CommonState } from 'src/state'

export interface OnClickOutside {
  (event: Event, element: Element): void
}

// or node
export type ClickBoundaryRef<Component = any> = Element | React.Ref<Component>

export interface ClickBoundaryRenderProp {
  (props: ClickBoundaryProps, dom: ClickBoundaryRef): ReactNode
}

export interface ClickBoundaryInnterRefProp {
  (dom: ClickBoundaryRef): void
  innerRef?: ClickBoundaryInnterRefProp
}

export interface ClickBoundaryProps {
  onClickOutside: OnClickOutside
  className?: string
  children: ClickBoundaryRenderProp | ReactNode

  state?: CommonState

  /**
   * @todo @api @see https://reactjs.org/docs/forwarding-refs.html
   *
   * @todo @name @example
   *    maybe aria has a standard one too
   *    [provide]  |  [consume]
   *
   *    parentRef  | childrenRef
   *               | childRef
   *               | innerRef
   *
   *    wrapRef    | boxWrap
   *    giveRef    | getRef
   *    provideRef |
   */
  parentRef?: Element
  innerRef?: ClickBoundaryInnterRefProp
}