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

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

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

function defaultRenderWrapper(props: LabelProps) {
  const { children, qa, identity } = props
  return (<LabelContainer qa={qa} key={identity}>{children}</LabelContainer>)
}

export {
  defaultRenderLabel,
  deafultRenderLinkButton,
  defaultRenderWrapper,
}