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}
    />
  )
}

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

export { defaultRenderHeaderView, defaultRenderExpandableView }