import React from 'react'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard'
import { ProductList } from './ProductList'
import { OrderStatus } from './OrderStatus'
import { PaymentSummary } from './PaymentSummary'
import { OrderHistoryProps } from './typings'

function defaultRenderHeaderView(
  props: OrderHistoryProps,
  state: AnimatedCardState
) {
  const { orderStatusConfig } = props
  return (
    <OrderStatus
      orderStatusConfig={orderStatusConfig}
      state={state}
      onPrintButtonClick={props.onPrintButtonClick}
      onOrderDetailsClick={props.onOrderDetailsClick}
    />
  )
}

function defaultRenderExpandableView(props: OrderHistoryProps) {
  const {
    className,
    paymentMethodConfig,
    orderSummaryConfig,
    ...remainingProps
  } = props
  return (
    <React.Fragment>
      <PaymentSummary
        paymentMethodConfig={paymentMethodConfig}
        orderSummaryConfig={orderSummaryConfig}
      />
      <ProductList {...remainingProps} />
    </React.Fragment>
  )
}

export { defaultRenderHeaderView, defaultRenderExpandableView }