import React from 'react'
import {
  TextPlaceholder,
  ParagraphPlaceholder,
  RectanglePlaceholder,
} from 'atoms/Placeholder'
import { PaymentSummaryProps } from './typings'
import {
  PaymentSummaryPanel,
  PaymentSummaryContent,
  PaymentSummaryInfoPanel,
  PaymentOrderSummary,
  PaymentSummaryRow,
  OrderLeftSection,
  OrderRightSection,
  PaymentSummaryWrapper,
  PaymentSummaryPanelSectionLeft,
  PaymentSummaryPanelSectionRight,
  // PaymentButtonsPanel,
  PrintButton,
  OrderAgainButton,
  ReturnButton,
  TextPlaceholderItem,
} from './styled'
import Empty from 'atoms/Empty'

/**
 * render shipping address
 */
function defaultRenderShippingAddress(props: PaymentSummaryProps) {
  return (
    <React.Fragment>
      <TextPlaceholderItem width={150} height={25} />
      <ParagraphPlaceholder
        widthList={[75, 92, 60, 30]}
        rows={4}
        lineSpacing={8}
        itemHeight={10}
      />
    </React.Fragment>
  )
}

/**
 * render shipping method
 */
function defaultRenderShippingMethod(props: PaymentSummaryProps) {
  return (
    <React.Fragment>
      <TextPlaceholderItem width={150} height={25} />
      <ParagraphPlaceholder
        widthList={[60, 80, 30]}
        rows={3}
        lineSpacing={8}
        itemHeight={10}
      />
    </React.Fragment>
  )
}

/**
 * render payment method
 */
function defaultRenderPaymentMethod(props: PaymentSummaryProps) {
  return (
    <React.Fragment>
      <TextPlaceholderItem width={150} height={25} />
      <ParagraphPlaceholder
        widthList={[100]}
        rows={1}
        lineSpacing={8}
        itemHeight={10}
      />
    </React.Fragment>
  )
}

/**
 * render product order summary
 */
function defaultRenderOrderSummary(props: PaymentSummaryProps) {
  return (
    <React.Fragment>
      <TextPlaceholderItem width={150} height={25} />
      <PaymentOrderSummary>
        <PaymentSummaryRow className="row" role="row">
          <OrderLeftSection>
            <TextPlaceholder width={130} height={10} />
          </OrderLeftSection>
          <OrderRightSection>
            <TextPlaceholder width={80} height={10} />
          </OrderRightSection>
        </PaymentSummaryRow>

        <PaymentSummaryRow className="row" role="row">
          <OrderLeftSection>
            <TextPlaceholder width={150} height={10} />
          </OrderLeftSection>
          <OrderRightSection>
            <TextPlaceholder width={40} height={10} />
          </OrderRightSection>
        </PaymentSummaryRow>

        <PaymentSummaryRow className="row" role="row">
          <OrderLeftSection>
            <TextPlaceholder width={150} height={10} />
          </OrderLeftSection>
          <OrderRightSection>
            <TextPlaceholder width={60} height={10} />
          </OrderRightSection>
        </PaymentSummaryRow>

        <PaymentSummaryRow className="row" role="row">
          <OrderLeftSection>
            <TextPlaceholder width={60} height={10} />
          </OrderLeftSection>
          <OrderRightSection>
            <TextPlaceholder width={80} height={10} />
          </OrderRightSection>
        </PaymentSummaryRow>

        <PaymentSummaryRow className="row" role="row">
          <OrderLeftSection>
            <TextPlaceholder width={140} height={10} />
          </OrderLeftSection>
          <OrderRightSection>
            <TextPlaceholder width={40} height={10} />
          </OrderRightSection>
        </PaymentSummaryRow>
      </PaymentOrderSummary>
    </React.Fragment>
  )
}

/**
 * render payment summary
 */
function defaultRenderContainer(props: PaymentSummaryProps) {
  const {
    renderShippingAddress,
    renderShippingMethod,
    renderPaymentMethod,
    renderOrderSummary,
    ...remainingProps
  } = props

  return (
    <PaymentSummaryPanel>
      <PaymentSummaryPanelSectionLeft>
        <PaymentSummaryInfoPanel>
          {renderShippingAddress(remainingProps)}
        </PaymentSummaryInfoPanel>
        <PaymentSummaryInfoPanel>
          {renderShippingMethod(remainingProps)}
        </PaymentSummaryInfoPanel>
      </PaymentSummaryPanelSectionLeft>
      <PaymentSummaryPanelSectionRight>
        <PaymentSummaryInfoPanel>
          {renderPaymentMethod(remainingProps)}
        </PaymentSummaryInfoPanel>
        <PaymentSummaryInfoPanel>
          {renderOrderSummary(remainingProps)}
        </PaymentSummaryInfoPanel>
      </PaymentSummaryPanelSectionRight>
    </PaymentSummaryPanel>
  )
}

/**
 * render wrapper
 */
function defaultRenderWrapper(props: PaymentSummaryProps) {
  const {
    className,
    shouldHideActionButtons,
    children,
    ...remainingProps
  } = props

  return (
    <PaymentSummaryWrapper
      className={className}
      shouldHideActionButtons={shouldHideActionButtons}
    >
      {children}
    </PaymentSummaryWrapper>
  )
}

export {
  defaultRenderShippingAddress,
  defaultRenderShippingMethod,
  defaultRenderPaymentMethod,
  defaultRenderOrderSummary,
  defaultRenderContainer,
  defaultRenderWrapper,
}