import { ReactNode } from 'react'

export interface CardRenderProp {
  (props: CardProps, state: CardState): ReactNode
}

export interface ClickHandler {
  (event: Event): void
}

/**
 * PROPS
 */
export interface CardProps {
  className?: string
  children?: ReactNode
  nowrap?: boolean

  /**
   * where we rendering the main card
   * @alias renderWrap
   * @alias renderCard
   */
  renderWrap?: CardRenderProp
  renderToggleButton?: CardRenderProp
  renderDefaultView?: CardRenderProp
  renderExpandedView?: CardRenderProp

  // not required - @Mohan This is Required if state is not undefined we get it from props.state which gets instantiated
  state?: BaseCardState
}

/**
 * STATES
 */
export interface BaseCardState {
  //  confirms that the card is opened or not
  isExpanded: boolean

  // ex: when the overlay opens the
  isConfirming: boolean

  /**
   * @note - this is not passed in, this state HAS the handler
   */
  handleClick: ClickHandler

  render(props: CardProps): ReactNode
  setIsExpanded(isExpanded: boolean): BaseCardState
  setIsConfirming(isConfirming: boolean): BaseCardState
  handleToggle(): void
  handleConfirm(): void
  handleConfirmCancel(): void
}

// this is for when we pass the state as-props into the children
// such as button
// so we have the <Card><Header> <ToggleButton onClick={state.handleClick} />
export interface CardPropsProvidedByState {
  // extends, but does not provide handleClick as-props
  onClick: ClickHandler
}

export interface CardState extends BaseCardState { }