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 } = props
  const Wrapper = noWrap ? React.Fragment : RemoveCardWrapper
  return <Wrapper>{children}</Wrapper>
}

export {
  defaultRenderText,
  defaultRenderButtons,
  defaultRenderBox,
  defaultRenderWrapper,
}