import React from 'react'
import {
  ImagePlaceholder,
  CirclePlaceholder,
  RectanglePlaceholder,
  TextPlaceholder,
  ParagraphPlaceholder,
} from 'atoms/Placeholder'
import { PaymentEditPlaceholderProps } from './typings'
import {
  PaymentCardIcon,
  DefaultPaymentOption,
  PaymentDetailsWrapper,
  PaymentCardDetail,
  PaymentEditHeader,
  PaymentEditButton,
  PaymentEditFooter,
  PaymentRemoveButton,
  PaymentEditCardWrapper,
} from './styled'

/**
 * render payment card icon
 */
function defaultRenderPaymentCardIcon(props: PaymentEditPlaceholderProps) {
  return (
    <PaymentCardIcon>
      <ImagePlaceholder width={76} height={48} />
    </PaymentCardIcon>
  )
}

/**
 * render payment card title / number
 */
function defaultRenderPaymentCardTitle(props: PaymentEditPlaceholderProps) {
  return <TextPlaceholder width={'80%'} />
}

/**
 * render payment expiry date
 */
function defaultRenderPaymentCardExpiry(props: PaymentEditPlaceholderProps) {
  return <TextPlaceholder width={'60%'} />
}

/**
 * render payment method type
 */
function defaultRenderPaymentMethod(props: PaymentEditPlaceholderProps) {
  return (
    <DefaultPaymentOption>
      <CirclePlaceholder width={24} height={24} />
      <TextPlaceholder width={'60%'} />
    </DefaultPaymentOption>
  )
}

/**
 * render payment balance
 */
function defaultRenderGiftCardBalance(props: PaymentEditPlaceholderProps) {
  return <TextPlaceholder width={'60%'} />
}

/**
 * render edit button
 */
function defaultRenderPaymentCardToggleButton(
  props: PaymentEditPlaceholderProps
) {
  return <RectanglePlaceholder width={162} />
}

/**
 * render remove button
 */
function defaultRenderPaymentRemoveButton(props: PaymentEditPlaceholderProps) {
  return <RectanglePlaceholder />
}

/**
 * Render Payment Edit Header
 */
function defaultRenderPaymentCardHeader(props: PaymentEditPlaceholderProps) {
  const {
    renderPaymentCardToggleButton,
    renderPaymentCardIcon,
    renderPaymentCardTitle,
    renderPaymentCardExpiry,
    renderGiftCardBalance,
    ...remainingProps
  } = props

  return (
    <PaymentEditHeader>
      <PaymentDetailsWrapper>
        {renderPaymentCardIcon(remainingProps)}
        <PaymentCardDetail>
          {renderPaymentCardTitle(remainingProps)}
          {renderPaymentCardExpiry(remainingProps)}
        </PaymentCardDetail>
      </PaymentDetailsWrapper>
      {renderGiftCardBalance(remainingProps)}
      <PaymentEditButton>
        {renderPaymentCardToggleButton(remainingProps)}
      </PaymentEditButton>
    </PaymentEditHeader>
  )
}

/**
 * Render Payment Edit Footer
 */
function defaultRenderPaymentCardFooter(props: PaymentEditPlaceholderProps) {
  const {
    renderPaymentMethod,
    renderPaymentRemoveButton,
    ...remainingProps
  } = props
  return (
    <PaymentEditFooter>
      {renderPaymentMethod(remainingProps)}
      <PaymentRemoveButton>
        {renderPaymentRemoveButton(remainingProps)}
      </PaymentRemoveButton>
    </PaymentEditFooter>
  )
}

/**
 * Render Wrapper
 */
function defaultRenderWrapper(props: PaymentEditPlaceholderProps) {
  const { className, children } = props
  return (
    <PaymentEditCardWrapper className={className}>
      {children}
    </PaymentEditCardWrapper>
  )
}

export {
  defaultRenderPaymentCardIcon,
  defaultRenderPaymentCardTitle,
  defaultRenderPaymentCardExpiry,
  defaultRenderPaymentMethod,
  defaultRenderGiftCardBalance,
  defaultRenderPaymentCardToggleButton,
  defaultRenderPaymentRemoveButton,
  defaultRenderPaymentCardHeader,
  defaultRenderPaymentCardFooter,
  defaultRenderWrapper,
}