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

/**
 * render header view
 */
function defaultRenderHeaderView(
  props: ApprovalProps,
  state: AnimatedCardState
) {
  return (
    <StyledApprovalStatus
      state={state}
      {...props}
      isExpanded={state.isExpanded}
    />
  )
}
function defaultRenderButtonGroup(
  props: ApprovalProps,
  state: AnimatedCardState
) {
  return <Empty />
}

/**
 * render expandable view
 */
function defaultRenderExpandableView(
  props: ApprovalProps,
  state?: AnimatedCardState
) {
  return (
    <React.Fragment>
      <StyledPaymentSummary {...props} shouldHideActionButtons={true} />
      <StyledProductItemList {...props} />
      <StyledUserComment {...props} />
    </React.Fragment>
  )
}
/**
 * render footer view
 */
function defaultRenderFooterView(
  props: ApprovalProps,
  state?: AnimatedCardState
) {
  return <Empty />
}

export {
  defaultRenderHeaderView,
  defaultRenderExpandableView,
  defaultRenderFooterView,
  defaultRenderButtonGroup,
}