import React, { ReactNode } from 'react'
import { isFunction } from 'exotic'
import { Empty } from 'atoms/Empty'
import { CirclePlaceholder, TextPlaceholder } from 'atoms/Placeholder'
import { PaymentCardProps } from './typings'
import {
  RemoveButtonPlaceholder,
  OptionLabel,
  PaymentOption,
  Footer,
  ToggleButton,
  ButtonContainer,
  GiftBalance,
  BalanceContainer,
  CardExpiry,
  CardTitle,
  CardDetailContainer,
  Icon,
  IconContainer,
  CardDetailsWrapper,
  Header,
  PaymentCardWrapper,
} from './styled'

/**
 * render default payment method option
 */
function defaultRenderTogglePaymentMethod(props: PaymentCardProps) {
  const { onChange } = props
  const handleClick = onChange

  return (
    <PaymentOption>
      <CirclePlaceholder width={24} height={24} onClick={handleClick} />
      <OptionLabel />
    </PaymentOption>
  )
}

/**
 * render remove button
 */
function defaultRenderRemoveButton(props: PaymentCardProps) {
  return <RemoveButtonPlaceholder width={200} height={44} />
}

/**
 * Render Payment Edit Footer
 */
function defaultRenderFooter(props: PaymentCardProps) {
  const {
    renderTogglePaymentMethod,
    renderRemoveButton,
    ...remainingProps
  } = props

  return (
    <Footer isConfirming={props.state.isConfirming} >
      {renderTogglePaymentMethod(remainingProps)}
      {renderRemoveButton(remainingProps)}
    </Footer>
  )
}

/**
 * render edit toggle button
 */
function defaultRenderButton(props: PaymentCardProps) {
  const { state } = props
  return <ToggleButton onClick={state.handleToggle} />
}

/**
 * render gift card balance
 */
function defaultRenderBalance(props: PaymentCardProps) {
  return (
    <React.Fragment>
      <TextPlaceholder width={100} />
      <GiftBalance width={100} />
    </React.Fragment>
  )
}

/**
 * render payment card title / number
 */
function defaultRenderCardDetail(props: PaymentCardProps) {
  return (
    <React.Fragment>
      <CardTitle width={200} />
      <CardExpiry width={100} />
    </React.Fragment>
  )
}

/**
 * render payment card icon
 */
function defaultRenderIcon(props: PaymentCardProps) {
  return <Icon width={76} height={48} />
}

/**
 * Render Payment card Header
 */
function defaultRenderHeader(props: PaymentCardProps) {
  const {
    renderIcon,
    renderCardDetail,
    renderButton,
    renderBalance,
    ...remainingProps
  } = props

  return (
    <Header isConfirming={props.state.isConfirming} >
      <CardDetailsWrapper>
        <IconContainer>{renderIcon(remainingProps)}</IconContainer>
        <CardDetailContainer>{renderCardDetail(remainingProps)}</CardDetailContainer>
        <BalanceContainer>
          {renderBalance(remainingProps)}
        </BalanceContainer>
      </CardDetailsWrapper>
      <ButtonContainer>
        {renderButton(remainingProps)}
      </ButtonContainer>
    </Header>
  )
}

/**
 * Render Box
 */
function defaultRenderBox(props: PaymentCardProps) {
  const { renderHeader, renderFooter, ...remainingProps } = props

  return (
    <React.Fragment>
      {renderHeader(remainingProps)}
      {renderFooter(remainingProps)}
    </React.Fragment>
  )
}

/**
 * Render Wrapper
 */
function defaultRenderWrapper(props: PaymentCardProps) {
  const { className, children, noWrap } = props
  const Wrapper = noWrap ? React.Fragment : PaymentCardWrapper

  return <Wrapper className={className}>{children}</Wrapper>
}

export {
  defaultRenderRemoveButton,
  defaultRenderTogglePaymentMethod,
  defaultRenderFooter,
  defaultRenderButton,
  defaultRenderBalance,
  defaultRenderCardDetail,
  defaultRenderIcon,
  defaultRenderHeader,
  defaultRenderBox,
  defaultRenderWrapper,
}