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

// rendering heading
function defaultRenderHeading(props: DashboardCardProps) {
  const { heading, pendingCount, headingDataQa } = props
  const zeroCount = pendingCount === 0 || pendingCount === '0'
  const headingContent = `${heading} ${(zeroCount || pendingCount) ? '-' : ''}`
  const countView = (zeroCount || pendingCount)
    ? <PendingCount zeroPendingCount={zeroCount}>{` ${pendingCount}`}</PendingCount>
    : <Empty />

  return (
    <React.Fragment>
      <StyledHeading
        breedType="h3"
        content={headingContent}
        data-qa={headingDataQa}
      />
      {countView}
    </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 }