import React from 'react'
import { CommonState } from 'src/state'
import { Address, StyledTitle, StyledAddress,  } from 'presets/Address'
import { ActionButtonGroup, ActionButtonGroupProps } from '../ActionButtonGroup'
import { PaymentSummaryProps } from './typings'
import { InfoHeading, InfoDec, AddressInfoPanel, ShippingMethodInfoPanel, PaymentMethodInfoPanel, StyledProductOrderSummary } from './styled'


function defaultRenderInfoItem(item: Object) {
  const { label, value } = item
  return (
    <React.Fragment>
      <InfoHeading content={label} breedType="h4" />
      <InfoDec content={value} />
    </React.Fragment>
  )
}

/**
 * render shipping address
 */
const createRenderProps = (data: AddressType) => {
  const renderTitle = (props: AddressPresetProps) => {
    return <StyledTitle breedType="h3" content={data.label} />
  }
  const renderAddress = (props: AddressPresetProps) => {
    return <StyledAddress address={data} />
  }

  return {
    renderTitle,
    renderAddress,
  }
}

function defaultRenderShippingAddress(props: PaymentSummaryProps) {
  // return <AddressInfoPanel>{defaultRenderInfoItem(props.shippingAddressInfo)}</AddressInfoPanel>
  const { shippingAddressInfo } = props
  const { renderTitle, renderAddress } = createRenderProps(shippingAddressInfo)
  const attributes = {
    renderTitle,
    renderAddress,
  }
  return (
    <AddressInfoPanel>
      <Address {...attributes} />
    </AddressInfoPanel>
  )
}

/**
 * render shipping method
 */
function defaultRenderShippingMethod(props: PaymentSummaryProps) {
  return <ShippingMethodInfoPanel>{defaultRenderInfoItem(props.shippingMethodInfo)}</ShippingMethodInfoPanel>
}

/**
 * render payment method
 */
function defaultRenderPaymentMethod(props: PaymentSummaryProps) {
  return <PaymentMethodInfoPanel>{defaultRenderInfoItem(props.paymentMethodInfo)}</PaymentMethodInfoPanel>
}

/**
 * render product order summary
 */
function defaultRenderOrderSummary(props: PaymentSummaryProps) {
  const { list, title } = props.orderSummaryInfo
  return (
    <React.Fragment>
      <StyledProductOrderSummary title={title} list={list} />
    </React.Fragment>
  )
}

export {
  defaultRenderShippingAddress,
  defaultRenderShippingMethod,
  defaultRenderPaymentMethod,
  defaultRenderOrderSummary,
}