import { ReactNode } from 'react'

export interface ButtonRenderProp {
  (props: ButtonProps, state: ButtonState): ReactNode
}

// export interface OnButtonClick {
//   (props: BaseButtonProps)
// }

/**
 * PROPS
 */
export interface BaseButtonProps {
  // used to set class name
  className?: string

  // used to set breed type of the button
  breedType?: string

  // used to change the icon based on the breed type
  iconType?: string

  // Arrow direction
  direction?: string

  // used to set text to the button
  text?: string

  // used to set width to the button
  width?: string | number

  /**
   * @description 'prefix' | 'suffix'
   * used to change the alignment position of the icon
   */
  iconAlignType?: string

  /**
   * @alias text | value | children
   */
  // value?: any
  children?: ReactNode

  /**
   * renderProps
   */
  // used to change button tag
  renderWrap?: ButtonRenderProp

  // used to change the icon of the button
  renderIcon?: ButtonRenderProp

  // used to hold the icon inside of the wrapper
  // since icons are just an svg element
  renderIconWrapper?: ButtonRenderProp

  // used to change Text element
  renderText?: ButtonRenderProp

  // used to render children
  renderChildren?: ButtonRenderProp
}

/**
 * STATES
 */
export interface ButtonState {
  /**
   * @description used for the focus state
   * => when cursor is on hover/focus on the button
   */
  isFocused: boolean

  /**
   * @description used for the active state
   * => when the button get pressed and went to active state
   */
  isActive: boolean

  /**
   * @description used for the selected state
   * => when the button gets pressed and still in active
   */
  isSelected: boolean

  /**
   * @description used for the disable state
   * => when the buttons gets deactivated from default mode
   */
  isDisabled: boolean
}

/**
 * @description WCAG PROPS
 */
export interface ButtonAccessibilityProps {
  /**
   * @description used to set the role to the button
   * <div role="button">
   */
  role?: string

  /**
   * @description used to set aria-label
   */
  'aria-label'?: string

  /**
   * @alias aria-label | aria-labelledby
   */
  'aria-labelledby'?: string

  /**
   * @description used to maintain the pressed state
   */
  'aria-pressed'?: boolean | string

  /**
   * @description id / identifier of the button
   */
  id?: string

  /**
   * @description used to set tabIndex for WCAG complaince
   */
  tabIndex?: string | number
}

export interface ButtonProps
  extends BaseButtonProps,
  ButtonAccessibilityProps { }