import React from 'react'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard'
import { ApprovalProps } from './typings'
import {
  StyledPaymentSummary,
  StyledProductItemList,
  StyledApprovalStatus,
  StyledUserComment,
} from './styled'

function defaultRenderHeaderView(
  props: ApprovalProps,
  state: AnimatedCardState
) {
  return (
    <StyledApprovalStatus
      {...props}
      state={state}
      isExpanded={state.isExpanded}
    />
  )
}

function defaultRenderExpandabelView(props: ApprovalProps) {
  return (
    <React.Fragment>
      <StyledPaymentSummary
        {...props}
        shouldHideActionButtons={true}
        isPurchaseOrder={props.isPurchaseOrder}
      />
      <StyledProductItemList {...props} />
      <StyledUserComment {...props} />
    </React.Fragment>
  )
}

export { defaultRenderHeaderView, defaultRenderExpandabelView }