import React from 'react'
import { OrderProps } from './typings'
import Empty from 'atoms/Empty'
import { AnimatedCardState } from 'src/components/presets/AnimatedExpandableCard'
import ActionButtonGroup from 'presets/Order/ActionButtonGroup'
import { CancelReturnForm as CancelReturnFormPlaceholder } from './CancelReturnForm'
import PaymentSummary from './PaymentSummary'
import ActionButtons from './ActionButtons'
import ProductItemList from './ProductItemList'
import {
  PaymentSummaryContainer,
  StyledOrderStatus,
  StyledProductItem,
  FooterContainer,
  StyledActionButtonGroup
} from './styled'

function defaultRenderStatus(props: OrderProps, state?: AnimatedCardState) {
  return <StyledOrderStatus  {...props} />
}

function defaultRenderProductItem(props: OrderProps, state?: AnimatedCardState) {
  return <StyledProductItem {...props} />
}

function defaultRenderPaymentSummary(props: OrderProps, state?: AnimatedCardState) {
  return <PaymentSummary {...props} />
}

function defaultRenderProductItemList(props: OrderProps, state?: AnimatedCardState) {
  return <ProductItemList {...props} />
}

/**
 * AnimatedExpandableCard renderProps
 * overwritting the functions here for default support
 */

/**
 * render header view
 */
function defaultRenderHeaderView(props: OrderProps, state: AnimatedCardState) {
  const { renderStatus, ...remainingProps } = props
  const view = renderStatus(remainingProps, state)
  return view
}

/**
 * render expandable view
 */
function defaultRenderExpandableView(props: OrderProps, state?: AnimatedCardState) {
  const { renderPaymentSummary, ...remainingProps } = props
  const paymentSummaryView = renderPaymentSummary(remainingProps, state)

  return <PaymentSummaryContainer>{paymentSummaryView}</PaymentSummaryContainer>
}

/**
 * render footer view
 */
function defaultRenderFooterView(props: OrderProps, state?: AnimatedCardState) {
  // console.log('[defaultRenderFooterView]', props)
  const { renderProductItemList, renderOrderButtons, renderOrderForm, ...remainingProps } = props
  const productItemListView = renderProductItemList(remainingProps, state)
  const OrderButtonsView = state.isExpanded === false && (
    <StyledActionButtonGroup
      renderDefaultView={renderOrderButtons}
      renderActiveView={renderOrderForm}
    />
  )

  return (
    <FooterContainer>
      {productItemListView}
      {OrderButtonsView}
    </FooterContainer>)
}

/**
 * Renders the product order action button group 'Track package', 'Order again', 'Cancel'
 * @param {OrderProps} props
 */
function defaultRenderOrderButtons(props: OrderProps) {
  return <Empty />
}

/**
 * Renders the product order button click form
 * @param {OrderProps} props
 */
function defaultRenderOrderForm(props: OrderProps) {
  return <CancelReturnFormPlaceholder {...props} />
}

export {
  defaultRenderStatus,
  defaultRenderProductItem,
  defaultRenderPaymentSummary,
  defaultRenderProductItemList,
  defaultRenderHeaderView,
  defaultRenderExpandableView,
  defaultRenderFooterView,
  //
  defaultRenderOrderButtons,
  defaultRenderOrderForm,
}