import React, { SyntheticEvent } from 'react'
import { isFunction } from 'exotic'
import { RemoveCardProps } from './typings'
import {
  RemoveCardWrapper,
  ButtonWrapper,
  CardText,
  ConfirmButton,
  CancelButton,
} from './styled'

function defaultRenderText(props: RemoveCardProps) {
  const { confirmationText } = props
  return <CardText>{confirmationText}</CardText>
}

function defaultRenderButtons(props: RemoveCardProps) {
  const {
    onConfirmation,
    confirmButtonLabel,
    onCancel,
    cancelButtonLabel,
  } = props
  const handleConfirmationClick = (
    event: SyntheticEvent<HTMLButtonElement>
  ) => {
    if (isFunction(onConfirmation)) {
      onConfirmation(event)
    }
  }
  const handleCancelClick = (event: SyntheticEvent<HTMLButtonElement>) => {
    if (isFunction(onCancel)) {
      onCancel(event)
    }
  }
  return (
    <ButtonWrapper>
      <ConfirmButton
        onClick={handleConfirmationClick}
        text={confirmButtonLabel}
      />
      <CancelButton onClick={handleCancelClick} text={cancelButtonLabel} />
    </ButtonWrapper>
  )
}

function defaultRenderBox(props: RemoveCardProps) {
  const { renderText, renderButtons, ...remainingProps } = props
  return (
    <React.Fragment>
      {renderText(remainingProps)}
      {renderButtons(remainingProps)}
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: RemoveCardProps) {
  const { noWrap, children, className, dataQa } = props
  const Wrapper = noWrap ? React.Fragment : RemoveCardWrapper
  const passThroughProps = {
    className,
    'data-qa': dataQa,
  }
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export {
  defaultRenderText,
  defaultRenderButtons,
  defaultRenderBox,
  defaultRenderWrapper,
}