import React from 'react'
import { TextPlaceholder } from '@skava/ui/dist/components/atoms/Placeholder'
import {
  SeparateWrapper,
  PaymentSummaryBox,
  HeadingPlaceholder,
  PlaceholderWrapper,
  PaymentSummaryWrapper,
} from './styled'
import { PaymentSummaryProps } from './typings'

function defaultRenderPaymentMethod() {
  return (
    <React.Fragment>
      <HeadingPlaceholder width={200} />
      <TextPlaceholder width={100} height={16} />
    </React.Fragment>
  )
}

function defaultRenderOrderSummary() {
  return (
    <React.Fragment>
      <HeadingPlaceholder width={200} />
      <SeparateWrapper>
        <TextPlaceholder width={150} height={16} />
        <TextPlaceholder width={60} height={16} />
      </SeparateWrapper>
      <SeparateWrapper>
        <TextPlaceholder width={150} height={16} />
        <TextPlaceholder width={40} height={16} />
      </SeparateWrapper>
      <SeparateWrapper>
        <TextPlaceholder width={160} height={16} />
        <TextPlaceholder width={50} height={16} />
      </SeparateWrapper>
      <PlaceholderWrapper>
        <TextPlaceholder width={75} height={16} />
        <TextPlaceholder width={80} height={16} />
      </PlaceholderWrapper>
      <PlaceholderWrapper>
        <TextPlaceholder width={150} height={16} />
        <TextPlaceholder width={40} height={16} />
      </PlaceholderWrapper>
    </React.Fragment>
  )
}

function defaultRenderBox(props: PaymentSummaryProps) {
  const { renderPaymentMethod, renderOrderSummary, ...remainingProps } = props
  return (
    <React.Fragment>
      <PaymentSummaryBox>
        {renderPaymentMethod(remainingProps)}
      </PaymentSummaryBox>
      <PaymentSummaryBox>
        {renderOrderSummary(remainingProps)}
      </PaymentSummaryBox>
    </React.Fragment>
  )
}

function defaultRenderWrapper(props: PaymentSummaryProps) {
  const { className, children } = props
  return (
    <PaymentSummaryWrapper className={className}>
      {children}
    </PaymentSummaryWrapper>
  )
}

export {
  defaultRenderPaymentMethod,
  defaultRenderOrderSummary,
  defaultRenderBox,
  defaultRenderWrapper,
}