import React from 'react'
import { OrderProps } from './typings'
import Empty from '@skava/ui/dist/components/atoms/Empty'
import { AnimatedCardState } from 'presets/AnimatedExpandableCard'
import { CancelReturnForm as CancelReturnFormPlaceholder } from './CancelReturnForm'
import PaymentSummary from './PaymentSummary'
import ProductItemList from './ProductItemList'
import {
  PaymentSummaryContainer,
  StyledOrderStatus,
  StyledProductItem,
  StyledStoreProductList,
  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} />
}

function defaultRenderStoreProductList(props: OrderProps, state?: AnimatedCardState) {
  return <StyledStoreProductList {...props} state={state} />
}

/**
 * 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, renderProductItemList, renderStoreProductList, ...remainingProps } = props
  const paymentSummaryView = renderPaymentSummary(remainingProps, state)
  const view = (
      <PaymentSummaryContainer>{paymentSummaryView}</PaymentSummaryContainer>
  )
  return view
}

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

  return (
    <FooterContainer isExpanded={state.isExpanded}>
      {storeProductListView}
      {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,
  defaultRenderStoreProductList,
  defaultRenderHeaderView,
  defaultRenderExpandableView,
  defaultRenderFooterView,
  //
  defaultRenderOrderButtons,
  defaultRenderOrderForm,
}