import React from 'react'
import { isFunction } from 'exotic'
import { DashboardCardProps } from './typings'
import {
  StyledHeading,
  PendingCount,
  StyledDescription,
  StyledGhostButton,
} from './styled'

// rendering heading
function defaultRenderHeading(props: DashboardCardProps) {
  const { heading, pendingCount, headingDataQa } = props
  const headingContent = `${heading} ${pendingCount ? '-' : ''}`

  return (
    <React.Fragment>
      <StyledHeading
        breedType="h3"
        content={headingContent}
        data-qa={headingDataQa}
      />
      {pendingCount && <PendingCount>{` ${pendingCount}`}</PendingCount>}
    </React.Fragment>
  )
}

// rendering the description
function defaultRenderDescription(props: DashboardCardProps) {
  return <StyledDescription content={props.description} />
}

// rendering the button
function defaultRenderButton(props: DashboardCardProps) {
  const { onButtonClick, buttonContent, buttonDataQa } = props
  const handleButtonClick = (event: Event) => {
    if (isFunction(onButtonClick)) {
      const changeArgs = { event }
      onButtonClick(changeArgs)
    }
  }
  return (
    <StyledGhostButton
      data-qa={buttonDataQa}
      text={buttonContent}
      onClick={handleButtonClick}
    />
  )
}

export { defaultRenderHeading, defaultRenderDescription, defaultRenderButton }