import React from 'react'
import { LabelProps, LabelButtonClickEventProps } from './typings'
import { StyledButton, LabelWrapper, StyledLabelDiv } from './styled'

function defaultRenderLinkButton(props: LabelProps) {
  const { icon } = props
  const className = props.className || ''
  const text = props.labelText || props.text
  function handleClick(event: LabelButtonClickEventProps) {
    props.onClick(event)
  }
  const buttonProps = {
    onClick: handleClick,
    icon,
    className,
  }
  return <StyledButton {...buttonProps}>{text}</StyledButton>
}

function defaultRenderLabel(props: LabelProps) {
  const { text, children, value } = props
  const className = props.className || ''
  return (
    <StyledLabelDiv className={className}>
      {text || children || value}
    </StyledLabelDiv>
  )
}

function defaultRenderWrapper(props: LabelProps) {
  const { children, dataQa, identity } = props
  const wrapperClass = props.wrapperClass || ''
  return (
    <LabelWrapper data-qa={dataQa} key={identity} className={wrapperClass}>
      {children}
    </LabelWrapper>
  )
}

export { defaultRenderLabel, defaultRenderLinkButton, defaultRenderWrapper }